AngularJS 核心控件：form

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

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

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

<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 這個標(biāo)簽本身有一些動態(tài)類可以使用：

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

form 對象的屬性有：

• $pristine 表單是否未被動過
• $dirty 表單是否被動過
• $valid 表單是否驗證通過
• $invalid 表單是否驗證失敗
• $error 表單的驗證錯誤

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

注意，這里的失敗信息是按序列取的一個。比如，如果一個字段既要求 required ，也要求 minlength ，那么當(dāng)它為空時， $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']);