AngularJS 表单验证及状态

我们已经知道如何创建表单，并激活（使用）数据绑定来实现数据和用户界面的输入输出。现在让我们看看在处理表单尤其验证各种状态的表单和输入时，AngularJS 怎样还能让我们受益：

表单验证

<html ng-app="notesApp">
<head><title>Notes App</title></head>
<body ng-controller="MainCtrl as ctrl">
  <form ng-submit="ctrl.submit()" name="myForm">
    <input type="text"
       ng-model="ctrl.user.username"
       required
       ng-minlength="4">
    <input type="password"
       ng-model="ctrl.user.password"
       required>
    <input type="submit"
       value="Submit"
       ng-disabled="myForm.$invalid">
  </form>
  <script src="
  https://cdn.jsdelivr.net/angularjs/1.2.28/angular.min.js"></script>
  <script type="text/javascript">
    angular.module('notesApp', [])
      .controller('MainCtrl', [function() {
        var self = this;
        self.submit = function() {
          console.log('User clicked submit with ', self.user);
        };
      }]);
  </script>
</body>
</html>

在下面这个例子中，我们修改前面示例添加一些验证。特别是如果用户没有填写所有必填字段，我们要禁用提交按钮。我们如何做到这一点呢？

我们给表单取名字 myForm，供以后参考。
我们使用 HTML5 验证标签为每个输入字段添加 required 属性。
我们添加 ng-minlength 验证器，强制 username 输入文本的最小长度值为 4 个字符。
我们点击 Submit 按钮，添加一个 ng-disabled 指令。如果条件成立会禁用元素。
我们使用表单暴露具有当前状态的表单控制器。在这种情况下，如果名为 myForm 的表单的 $invalid 为 true 则禁用按钮。

表单状态

当您使用表单(给他们命名 )，AngularJS 创建 FormController 保存表单的当前状态及一些辅助方法。正如我们在前面的例子使用 myForm，您可以通过表单名访问 FormController 表单。作为状态公开并和数据绑定保持最新同步的属性如下表所示。

AngularJS 中的表单状态：

表单状态	描述
$invalid	当任一验证(required、ng-minlength 等 ) 标识表单的任一字段为无效时 AngularJS 设置这种状态
$valid	与 $invalid 相反，设置所有表单验证目前评估为正确状态
$pristine	AngularJS 中所有表单从该状态开始。这允许你找出用户是否开始输入并修改任何表单元素。可能的用法：表单原始状态下禁用 reset 按钮。
$dirty	与 $pristine 相反。即用户做了一些更改（他可以恢复,但 $dirty 标识已经设置）。
$error	包含控件或表单验证失败的引用。在接下来的章节我们将进一步讨论这部分。

表中提到的每个状态都是布尔值，可以用来有条件地隐藏、显示、禁用或启用 HTML 用户界面元素。当用户输入或修改表单时，只要使用 ng-model 和表单名，状态值就会同步更新。