（3）AngularJS 1.X 之和Input相关的指令

1.引言

      在上一篇博客中主要说了两个指令：ng-model和ng-bind，这两个指令都是和数据绑定相关的，ng-model指令可以双向绑定数据，ng-bind可以向html页面输出我们的变量，在本篇博客中将介绍一下AngularJS对于表单input相关标签的扩展，使用AngularJS关于input标签的扩展我们可以实现更多复杂的功能，比如表单验证，还有控制input是否可用等等。

2. AngularJS的input验证

接下来我们先看一下在AngularJS扩展的input中如何去实现表单的验证呢？AngularJS扩展的input标签类型有：

• checkbox：代表复选框
• date：代表日期格式，日期格式必须按照(yyyy-MM-dd)的校验规范，例如： 2009-01-06.
• dateTimeLocal：日期格式，日期格式必须按照(yyyy-MM-ddTHH:mm)的校验规范
• email：Email格式的文本输入验证，用于验证是不是有效的email地址
• month：月份输入的验证和转换
• number：数字格式的文本输入验证和转换
• radio：HTML单选框。
• text：可以进行angular数据绑定的标准HTML文本输入框。
• time：时间输入的验证和转换
• url：URL文本输入校验
• week：年的周数输入的验证和转换到日期

AngularJS一共扩展了上述这几种input标签类型，并且提供了相应的验证机制，比如：

• formname.$error.required：表单是否错误（比如有没有必需的值没有填写），其中formname为表单的name属性,这是一个bool类型
• formname.$valid：表单是否合法（比如表单某个文本框输入是否和验证的匹配），其中formname为表单的name属性,这是一个bool类型
• formname.inputname.$valid: 表单的input标签是否合法，其中formname是表单的name属性，inputname是input标签的input属性,这是一个bool类型
• formname.inputname.$error:表单的input标签是否错误，其中formname是表单的name属性，inputname是input标签的input属性,这是一个bool类型

2.1 input验证代码实现

接下来我们就用一个实例来看看input的代码验证是符合实现的。

2.1.1 验证标签的合法性

• 首先引入我们的AngularJS函数库

<script src="js/angular.js"></script>

• 然后创建一个form表单（必须带有name属性），创建一个input标签（必须带有name属性），为了可以实时显示我们的数据，添加ng-model指令

    <form name="myform">        输入我们的url: <input name="myurl" type="url" ng-model="value">    </form>

• 然后我们看一下我们的验证值

myform.myurl.$valid:{{myform.myurl.$valid}}

• 运行结果

2.1.2 验证标签的错误性

      上面我们验证的是url属否输入合法，但是存在一个问题，当我们不输入任何东西的时候，标签的验证是是显示为：true，这显然是不符合要求的：

接下来我们就来添加required，设置该值是必须的。

• 给input标签添加必需属性

     <form name="myform">        输入我们的url: <input name="myurl" type="url" required ng-model="value">    </form>

• 然后添加错误认证（注意：我们在myform.myurl.$error.required前面加了一个）

myform.myurl.$error:{{!myform.myurl.$error.required}}

• 运行结果

2.1.3 结合合法和错误实现我们的表单验证

      在上面的例子中，还是存在一定的缺陷，在真实的开发中，我们不应该仅仅的显示一个true和false就完事了，我们更应该的是给用户提示，如果用户输错了，我们提示用户输入的url不合法，如果用户输入正确，然后我们不提示，在这里我们就结合ng-show指令，实现我刚刚所说的功能，ng-show需要一个布尔值，如果布尔值为true标签显示，如果布尔值为false，标签不显示，接下来我们来看看是如何实现的。

• 引入我们的AngularJS函数库（省略）
• 创建我们的表单（以及我们的表单验证）

<form name="myform">        输入我们的url: <input name="myurl" type="url" required ng-model="value">        <span ng-show="myform.myurl.$error.required">url必须输入</span>        <span ng-show="!myform.myurl.$valid">url输入不合法</span>    </form>

• 运行结果

2.2 AngularJS帮助文档

      当然AngularJS表单验证的属性没有上述的那么简单，如果想进一步了解AngularJS表单验证的其他属性，可以去查看AngularJS的帮助文档，帮助文档的下载地址为：AngularJS帮助文档

3. AngularJS的input其他扩展

      AngularJS关于input标签的扩展绝对不仅仅局限于上述的表单验证，它还扩展了一些其他的用法，比如：标签是否可用，标签是否选中，接下我们看看这个指令如何使用。

3.1 控制标签是否可用

• 代码

<input type="button" value="按钮不可点击"  ng-disabled="true">

• 运行结果

3.2 控制input标签只可读

• 代码

<input type="text" value="{{'文本只可读'}}" ng-readonly="true">

• 运行结果

3.3 控制复选框选中

• 代码

<input type="checkbox" value="{{'复选框被选中'}}" ng-checked="true">

• 运行结果

3.4 控制select选中

• 代码

<input type="checkbox" ng-model="sel"><select>    <option>11111</option>    <option ng-selected="sel" >22222</option></select>

• 运行结果

4.总结

      在本篇博客中主要记录了AngularJS对于input标签的扩展，以及如何实现表单验证，还有一些实现了表单的是否可用，这时候我们可能有疑问，为什么AngularJS会扩展一些ng-selected,ng-readonly此类指令，此类指令可以直接写AngularJS变量，很方便我们的MVC思想，以后我们可以将变量写在我们的控制器中，然后控制我们的HTML标签。