最近在看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>

参数说明

小贴士：记得，在使用$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的参数列表，下面，仅列出与上个控件不同的参数。

参数说明

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

参数说明

注释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/