AngularJS 表单
AngularJS使用了MVX的结构,我们可以是传统的表单更加强大。比如过去我们得自己写一大堆验证,比过过去我们得自己转换用户的输入,
现在这些工作全部可以交给AngularJS. 我们唯一要关心的就是model中的值。
在AngularJS中 ,form和input其实也是directive。(是不是很奇怪!) 这两个家伙就是传统form的加强版。
使用input标签
ng-model input专用directive,双向绑定,配合其他功能提供输入验证和转换功能。
required 表示不能为空;ng-minlength 表示最小长度; ng-maxlength 表示最大长度;ng-pattern="/^[a-zA-Z]*$/" 表示必须符合的正则.
现有如下代码:
<input ng-model="user.name" required ng-minlength="3" ng-maxlength="10" ng-pattern="/^[a-zA-Z]*$/" />
如果输入"ab",那么user.name中其实是空的,因为ng-minlength验证没通过。同理如果ng-maxlength、ng-pattern没有通过,user.name
中都是空值。所以我们可以直接拿来用user.name而不必担心中会有invalid的值。
使用checkbox
checkbox有true和false两个值。 当然,如果加了ng-true-value和ng-false-value两个directive,可以改变默认的值。
如下,如果选中该checkbox,user.admin的值会是"admin",没选中会是"normal"
<input type="checkbox" ng-model="user.admin" ng-true-value="admin" ng-false-value="normal"/>
使用radio
没什么好说的,如下代码:
<input type="radio" ng-model="user.sex" value="male"/>
<input type="radio" ng-model="user.sex" value="female"/>
使用select
简单用法:
<select ng-model="user.sex">
<option style="display:none" value=""></option> //如果不加这一行,那么会出现三个选项,第一项为空
<option value="m">Male</option>
<option value="f">Female</option>
</select>
复杂用法:
首先 $scope.users=[{name:'Mike',email:'mike@qq.com'},{name:'jack',emial:'jack@163.com'}]
然后:<select ng-options="u.email as u.name for u in users">
<option style="display:none" value=""></option>
</select>
意思是在select中显示的是每个user的name,但是选中后的值却是每个user的email
深入了解ngModel
每一个ngModel都会新建一个ngModelController的对象。该对象可以访问该input上的其他directive。
ngModel是双向绑定的,相应的ngModelController中有两个数组:$formatters 和$parsers。$formatters 用来把model中的值
转换为显示在view上的值;$parsers则相反。
每一个form都对应一个ngFormController对象。ngModelController作为ngFormController对象的属性。
假设有如下代码:
<form name='form1'>
<input name='input1' type='email' required/>
</form>
那么 $scope.form1就是ngFormController对象;$scope.form1.input1就是ngModelController的对象。
那么通过$scope.form1.$valid就可以知道这个form有没有通过验证;$scope.form1.input1.$valid就可以知道这个input有没有通过验证。
但是这个input上其实有两个验证:一个是type='email';一个是 required。怎么知道那个验证有没有通过? 可以使用
$scope.form1.input1.$error['required'] 和$scope.form1.input1.$error['email']这两个布尔值知道。