AngularJS 核心控件：form

form 是核心的一個(gè)控件。 ng 對(duì) form 這個(gè)標(biāo)簽作了包裝。事實(shí)上， ng 自己的指令是叫 ng-form 的，區(qū)別在于， form 標(biāo)簽不能嵌套，而使用 ng-form 指令就可以做嵌套的表單了。

form 的行為中依賴(lài)它里面的各個(gè)輸入控制的狀態(tài)的，在這里，我們主要關(guān)心的是 form 自己的一些方法和屬性。從 ng 的角度來(lái)說(shuō)， form 標(biāo)簽，是一個(gè)模板指令，也創(chuàng)建了一個(gè) FormController 的實(shí)例。這個(gè)實(shí)例就提供了相應(yīng)的屬性和方法。同時(shí)，它里面的控件也是一個(gè) NgModelController 實(shí)例。

很重要的一點(diǎn)， form 的相關(guān)方法要生效，必須為 form 標(biāo)簽指定 name 和 ng-controller ，并且每個(gè)控件都要綁定一個(gè)變量。 form 和控件的名字，即是 $scope 中的相關(guān)實(shí)例的引用變量名。

<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']);

除去對(duì)象的方法與屬性， form 這個(gè)標(biāo)簽本身有一些動(dòng)態(tài)類(lèi)可以使用：

• ng-valid 當(dāng)表單驗(yàn)證通過(guò)時(shí)的設(shè)置
• ng-invalid 當(dāng)表單驗(yàn)證失敗時(shí)的設(shè)置
• ng-pristine 表單的未被動(dòng)之前擁有
• ng-dirty 表單被動(dòng)過(guò)之后擁有

form 對(duì)象的屬性有：

• $pristine 表單是否未被動(dòng)過(guò)
• $dirty 表單是否被動(dòng)過(guò)
• $valid 表單是否驗(yàn)證通過(guò)
• $invalid 表單是否驗(yàn)證失敗
• $error 表單的驗(yàn)證錯(cuò)誤

其中的 $error 對(duì)象包含有所有字段的驗(yàn)證信息，及對(duì)相關(guān)字段的 NgModelController 實(shí)例的引用。它的結(jié)構(gòu)是一個(gè)對(duì)象， key 是失敗信息， required ， minlength 之類(lèi)的， value 是對(duì)應(yīng)的字段實(shí)例列表。

注意，這里的失敗信息是按序列取的一個(gè)。比如，如果一個(gè)字段既要求 required ，也要求 minlength ，那么當(dāng)它為空時(shí)， $error 中只有 required 的失敗信息。只輸入一個(gè)字符之后， required 條件滿(mǎn)足了，才可能有 minlength 這個(gè)失敗信息。

<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']);