【Angularjs文档翻译及实例】表单指令集（input）

最近在看Angular的知识，无论是书中还是网上，讲解跟表单有关的指令集都是点到为止，讲些基础验证，比如，是否为空，是否为email地址，更多的并没有讲解，但是，当我查看Angular的官方文档时，发现与input控件相关的指令集真的很丰富，有关HTML5新增的控件也有很多，所以，我试着将input相关的指令集部分的英文文档再加上自己的理解翻译了一下，如果有不当的地方还希望各位看观指正。

Angular真的很强大，强大的让人眼前一亮。

约定

参数名会使用驼峰式书写。例如ngShow，此参数用在控件的属性时，属性名为：ng-show。以此为约定。

input

用法

<input
  ng-model="string"
  [name="string"]
  [required="string"]
  [ng-required="boolean"]
  [ng-minlength="number"]
  [ng-maxlength="number"]
  [ng-pattern="string"]
  [ng-change="string"]
  [ng-trim="boolean"]>
...
</input>

参数说明

参数	类型	详情
ngModel	string	改选参数，用于数据绑定
name(optional)	string	控件自定义名称，运行期间可使用些名称控制控件
required(optional)	string	如果添加此属性，并且内容为空，则设置$error.required为true
ngRequired(optional)	boolean	如果必填，则此属性设置为true
ngMinlength(optional)	number	如果输入的长度小于此值，就会设置$error.min为true
ngMaxlength(optional)	number	如果输入的长度大于此值，就会设置$error.max为true。如果此值设置为负数或者非数值，则表示可输入任意长度。
ngPattern(optional)	string	如果此属性中的表达式不能匹配输入的值，就会设置$error.pattern为true。如果表达式为RegExp对象，那么就会直接使用。如果表达式是一个字符串，那么Angular会在字符串外层增加^和$。比如，"abc"将会转换为new RegExp('^abc&')。
ngChange(optional)	string	onChange事件绑定
ngTrim(optional)	boolean	如果为false，不会修剪输入。如果输入框的类型为password，此属性无作用。默认是true

小贴士：记得，在使用$error时，要使用控件的name值作为变量，不应该使用ngModel值作为变量。

下面的代码分别演示了required和ngMinlength属性的用法，以及$error的实际应用。

请注意ngShow中的内容，使用的变量全部是name属性的值。

<div class="wrapper" ng-app="myapp">
    <form name="form" ng-controller="inputCtrl">
        <div class="alert alert-danger" ng-show="form.txt1.$error.required">input1 is empty.</div>
        <div class="alert alert-danger" ng-show="form.txt2.$error.minlength">input2 is must longer than 5</div>
        <div class="form-group">
            <label>input1:(设置了required属性，清空一下内容查看效果)</label>
            <input type="text" name="txt1" class="form-control" ng-model="input1" required />
        </div>
        <div class="form-group">
            <label>input2:(设置了ngMinlength属性，增加内容查看效果)</label>
            <input type="text" name="txt2" class="form-control" ng-model="input2" ng-minlength="5" />
        </div>
        form.txt1.$error.required:{{form.txt1.$error.required}}
        <br />
        form.txt2.$error.minlength:{{form.txt2.$error.minlength}}
    </form>
</div>

var app = angular.module('myapp', []);

app.controller('inputCtrl', function($scope) {
    $scope.input1 = 'required';
    $scope.input2 = 'min';
});

运行效果：https://jsfiddle.net/Lionney/my2ht8fx/

input[checkbox]、input[date]以及input[datetime-local]

input[checkbox]用法

<input type="checkbox"
       ng-model="string"
       [name="string"]
       [ng-true-value="expression"]
       [ng-false-value="expression"]
       [ng-change="string"]>

其中ngMode、name以及ngChange请参照input的参数列表，下面，仅列出与上个控件不同的参数。

参数说明

参数	类型	详情
ngTrueValue(optional)	expression	当选择框为选中状态时，则返回此属性中的值。此属性内容默认为表达式，所以，如果是字符型数据，则要在外面使用'包含起来。比如：ng-true-value="'abc'",否则会按表达式处理。
ngFalseValue(optional)	expression	当选择框为未选中状态时，则返回此属性中值。其余同上。

input[date]用法

<input type="date"
       ng-model="string"
       [name="string"]
       [min="string"]
       [max="string"]
       [ng-min=""]
       [ng-max=""]
       [required="string"]
       [ng-required="string"]
       [ng-change="string"]>

其中ngMode、name、required、ngRequired以及ngChange请参照input的参数列表，下面，仅列出与input控件不同的参数。

参数说明

参数	类型	详情
min(optional)	string	日期选择器是HTML5中新加的表单控件类型，此属性是为了设置控件最小可选择的日期。这个属性必须使用ISO日期字符串（yyyy-MM-dd）格式。当然，也可以插入变量（详见注释1）。如果不符合此属性设置的最小值，则会设置$error.min为true。
max(optional)	string	此属性为设置日期控制所能选择的最大日期。其它与上一参数相同。如果不符合此属性设置的最小值，则会设置$error.max为true。
ngMin(optional)	datestring	此为angular的属性，设置后，不会影响控件的最小可选择日期，如果用户选择填写的与属性不符，则会设置$error.min为true。属性设置方法与min参数相同
ngMax(optional)	datestring	此为angular的属性，设置后，不会影响控件的最大可选择日期，如果用户选择填写的与属性不符，则会设置$error.max为true。属性设置方法与max参数相同

注释1：min="{{minDate | date:'yyyy-MM-dd'}}"

input[datetime-local]用法

<input type="datetime-local"
       ng-model="string"
       [name="string"]
       [min="string"]
       [max="string"]
       [ng-min=""]
       [ng-max=""]
       [required="string"]
       [ng-required="string"]
       [ng-change="string"]>

此控件与date控件一样，只是在设置min、max、ngMin、ngMax属性时，内容有所不同，因为此控件是选择日期及时间，所以设置的时候要加上时间，格式依然要使用ISO规定的日期时间格式（yyyy-MM-ddTHH:mm:ss），当使用日期过滤器时，格式化为："{{maxDatetimeLocal | date:'yyyy-MM-ddTHH:mm:ss'}}"

其它的参数说明与date是一样，可以参照date参数说明。

下面实例为使用了以上控件的综合实例，代码如下：

<div ng-app="checkbox" ng-controller="ckCtrl">
    <form name="myForm">
        <input type="checkbox" name="ck" ng-model="ck1" />选择1
        <br />
        <input type="checkbox" name="ck" ng-model="ck2" ng-true-value="2+5" ng-false-value="4+5" />选择2
        <br />
        <input type="date" name="date" ng-min="'2017-01-01'" ng-model="dd" />
        <span ng-show="myForm.date.$error.min">min validate error.</span>
        <br />
        <input type="datetime-local" name="dlocal" ng-model="dl" ng-min="'2017-01-01T07:07:01'" />
        <span ng-show="myForm.dlocal.$error.min">min validate error.</span>
        <br />
        <span>ck={{ck1}}</span>
        <br />
        <span>ck={{ck2}}</span>
        <br />
        <span>dd={{dd}}</span>
        <br />
        <span>dl={{dl}}</span>
    </form>
</div>

var app = angular.module('checkbox', []);

app.controller('ckCtrl', function($scope) {
    $scope.ck1 = true;
    $scope.ck2 = 7
    $scope.dd = new Date('2017-01-01');
    $scope.dl = new Date('2017-01-01 08:08:00');
});

程序说明

当使用$error时，必须同时设置控件的name与ngModel属性，使用name属性值做为变量，否则，程序将达不到验证效果。验证的提示信息也必须放在form表单中，见代码中带有ngShow部分内容。

checkbox的初始化有两种方式，第一种即此代码中所展示的ck1。如果没有设置ngTureValue/ngFalseValue的话，可以直接赋值true/false。第二种为此代码中所展示的ck2。如果设置了ngTureValue/ngFalseValue，那么要使用ngTureValue/ngFalseValue中的值来初始化选择框状态。

运行效果https://jsfiddle.net/Lionney/snojqoqy/