AngularJS 核心控件：form

form 是核心的一个控件。 ng 对 form 这个标签作了包装。事实上， ng 自己的指令是叫 ng-form 的，区别在于， form 标签不能嵌套，而使用 ng-form 指令就可以做嵌套的表单了。

form 的行为中依赖它里面的各个输入控制的状态的，在这里，我们主要关心的是 form 自己的一些方法和属性。从 ng 的角度来说， form 标签，是一个模板指令，也创建了一个 FormController 的实例。这个实例就提供了相应的属性和方法。同时，它里面的控件也是一个 NgModelController 实例。

很重要的一点， form 的相关方法要生效，必须为 form 标签指定 name 和 ng-controller ，并且每个控件都要绑定一个变量。 form 和控件的名字，即是 $scope 中的相关实例的引用变量名。

<form name="test_form" ng-controller="TestCtrl">
  <input type="text" name="a" required ng-model="a"  />
  <span ng-click="see()">{{ test_form.$valid }}</span>
</form>


angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
  $scope.see = function(){
    console.log($scope.test_form);
    console.log($scope.test_form.a);
  }
});
angular.bootstrap(document.documentElement, ['app']);

除去对象的方法与属性， form 这个标签本身有一些动态类可以使用：

• ng-valid 当表单验证通过时的设置
• ng-invalid 当表单验证失败时的设置
• ng-pristine 表单的未被动之前拥有
• ng-dirty 表单被动过之后拥有

form 对象的属性有：

• $pristine 表单是否未被动过
• $dirty 表单是否被动过
• $valid 表单是否验证通过
• $invalid 表单是否验证失败
• $error 表单的验证错误

其中的 $error 对象包含有所有字段的验证信息，及对相关字段的 NgModelController 实例的引用。它的结构是一个对象， key 是失败信息， required ， minlength 之类的， value 是对应的字段实例列表。

注意，这里的失败信息是按序列取的一个。比如，如果一个字段既要求 required ，也要求 minlength ，那么当它为空时， $error 中只有 required 的失败信息。只输入一个字符之后， required 条件满足了，才可能有 minlength 这个失败信息。

<form name="test_form" ng-controller="TestCtrl">
  <input type="text" name="a" required ng-model="a"  />
  <input type="text" name="b" required ng-model="b" ng-minlength="2" />
  <span ng-click="see()">{{ test_form.$error }}</span>
</form>


angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
  $scope.see = function(){
    console.log($scope.test_form.$error);
  }
});
angular.bootstrap(document.documentElement, ['app']);