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="http://riafan.com/libs/angular.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>

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

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

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

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

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

不完全译自《AngularJS-Up and Running》。

发表评论