AngularJs(Part 9)--AngularJS 表单

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']这两个布尔值知道。

原文地址:https://www.cnblogs.com/formyjava/p/4166307.html