82

我对 angularjs 很陌生。假设我的应用程序有一个表单。使用检查器，我注意到如果 angularjs 认为表单无效，它会在表单中添加一个 ng-invalid 类。迷人的。

所以似乎为了检查表单是否有效，我需要用 Jquery 选择器污染我的代码？！在不使用表单控制器的情况下，指示表单有效性的 angularjs 方法是什么？

4

4 回答 4

150

当您<form>在 ngApp 中放置标签时，AngularJS 会自动添加表单控制器（实际上有一个指令，称为form添加必要行为）。name 属性的值将绑定在您的范围内；所以类似的东西<form name="yourformname">...</form>会满足：

表单是 FormController 的一个实例。可以选择使用 name 属性将表单实例发布到范围中。

因此，要检查表单有效性，您可以检查$scope.yourformname.$valid范围属性的值。

您可以在开发人员指南部分获取有关表单的更多信息。

于 2013-01-13T02:25:04.930 回答
36

例子

<div ng-controller="ExampleController">
  <form name="myform">
   Name: <input type="text" ng-model="user.name" /><br>
   Email: <input type="email" ng-model="user.email" /><br>
  </form>
</div>

<script>
  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

     //if form is not valid then return the form.
     if(!$scope.myform.$valid) {
       return;
     }
  }]);
</script>
于 2014-10-01T10:18:53.990 回答
12

你也可以使用myform.$invalid

例如

if($scope.myform.$invalid){return;}
于 2015-09-26T18:20:50.390 回答
6

形式

  • 模块 ng 中的指令 实例化 FormController 的指令。

如果指定了 name 属性，则表单控制器以该名称发布到当前范围。

别名：ngForm

在 Angular 中，表单可以嵌套。这意味着当所有子表单都有效时，外部表单也有效。但是，浏览器不允许嵌套元素，因此 Angular 提供了 ngForm 指令，该指令的行为相同但可以嵌套。这允许您拥有嵌套的表单，这在使用 ngRepeat 指令动态生成的表单中使用 Angular 验证指令时非常有用。由于您无法使用插值动态生成输入元素的名称属性，因此您必须将每组重复输入包装在 ngForm 指令中，并将它们嵌套在外部表单元素中。

CSS 类

如果表单有效，则设置ng- valid。

如果表单无效，则设置ng- invalid。

如果表单是原始的，则设置ng- pristine。

如果表单脏，则设置ng- dirty。

如果表单已提交，则设置ng- submitted。

请记住，ngAnimate 在添加和删除时可以检测到这些类中的每一个。

提交表单并阻止默认操作

由于表单在客户端 Angular 应用程序中的作用不同于传统的往返应用程序，因此浏览器最好不要将表单提交转换为将数据发送到服务器的完整页面重新加载。相反，应该触发一些 javascript 逻辑来以特定于应用程序的方式处理表单提交。

出于这个原因，Angular 会阻止默认操作（向服务器提交表单），除非元素具有指定的操作属性。

您可以使用以下两种方法之一来指定提交表单时应调用的 javascript 方法：

表单元素上的ngSubmit指令

第一个按钮或提交类型的输入字段上的ngClick指令 (input[type=submit])

要防止处理程序重复执行，请仅使用 ngSubmit 或 ngClick 指令之一。

这是因为 HTML 规范中的以下表单提交规则：

如果表单只有一个输入字段，则在此字段中按 enter 会触发表单提交 (ngSubmit) 如果表单有 2+ 个输入字段且没有按钮，或者input[type=submit]如果表单有一个或多个输入字段并且然后按 enter 不会触发提交并且一个或多个按钮或input[type=submit]然后在任何输入字段中按 Enter 将触发第一个按钮或input[type=submit](ngClick) 上的单击处理程序和封闭表单 (ngSubmit) 上的提交处理程序。

提交封闭表单后，任何未决的 ngModelOptions 更改都将立即发生。请注意，ngClick 事件将在模型更新之前发生。

使用 ngSubmit 可以访问更新的模型。

应用程序.js：

angular.module('formExample', [])
  .controller('FormController', ['$scope', function($scope) {
    $scope.userType = 'guest';
  }]);

表格：

<form name="myForm" ng-controller="FormController" class="my-form">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span>
  userType = {{userType}}
  myForm.input.$valid = {{myForm.input.$valid}}
  myForm.input.$error = {{myForm.input.$error}}
  myForm.$valid = {{myForm.$valid}}
  myForm.$error.required = {{!!myForm.$error.required}}
 </form>

来源：AngularJS：API：表单

于 2015-05-05T17:04:04.253 回答