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

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

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

约定

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

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"]>
...


参数说明

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

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

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

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]用法

ng-model="string"
[name="string"]
[ng-true-value="expression"]
[ng-false-value="expression"]
[ng-change="string"]>

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

参数说明

input[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控件不同的参数。

参数说明

注释1：min=&＃8221;{{minDate | date:&＃8217;yyyy-MM-dd&＃8217;}}&＃8221;

input[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），当使用日期过滤器时，格式化为：&＃8221;{{maxDatetimeLocal | date:&＃8217;yyyy-MM-ddTHH:mm:ss&＃8217;}}&＃8221;

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

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

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/