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