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']);
更多建议: