使用表单

一、校验表单

1）novalidate  

在自己的表单元素上增添novalidate属性，该属性定义于HTML5规范之中，用于告诉浏览器不要自己校验表单，从而允许angularjs不受干扰的工作。

2）input元素的type属性值：

checkbox 创建一个复选框

email 创建一个接受邮件地址作为值的文本输入框

number 创建一个接收数值类型作为值的文本输入框

radio 创建一个单选框

text 创建一个接收任何值的标准文本输入框

url 创建一个接收URL作为值的文本输入框

除了type属性所指定的格式之外，还可以通过混合使用HTML标准属性和angularjs指令，来实现更进一步的约束。例如required

3）监控表单的有效性

$pristine 如果用户没有与元素/表单产生交互，则返回true

$dirty 如果用户与元素/表单产生过交互，则返回true

$valid 当元素/表单内容的校验结果为有效时则返回true

$invalid 当元素/表单内容的校验结果为无效时则返回true

$error 提供校验错误的详情信息

要向获得angularjs的最佳校验效果，必须为表单元素设置一些属性，首要的便是name属性，替换表单元素的指令将会定义一些有用的变量，用于表示表单数据的有效性，并且通过name属性的值来访问这些变量值。

<form name="myForm" novalidate ng-submit="change()"></form>
<button type="submit" ng-disabled="myForm.$invalid"></button>

<form name="myForm" novalidate ng-submit="change()">
    <label>
        Eamil:
        <input name="userEmail" type="email" required />
    </label>
    <div class="error" ng-show="myForm.userEmail.$invalid && myForm.userEmail.$dirty">
        please enter a valid email address
    </div>
</form>

$error对象直到校验出问题时才会被定义，可以如下使用

<div class="error" ng-show="myForm.userEmail.$invalid && myForm.userEmail.$dirty">
    {{getError(myForm.userEmail.$error)}}
</div>

$scope.getError=function(error){
    if(angular.isDefined(error)){
        if(error.required){
           return "please enter a value";
        }else if(error.email){
            return "please enter a valid email address";
        }
    }
}

二、提供表单校验反馈信息

2.1 使用CSS提供校验反馈信息

angularjs校验中用到的类

ng-pristine 用户未曾交互过的元素被添加到这个类

ng-dirty 用户曾经交互过的元素被添加到这个类

ng-valid 校验结果为有效的元素在这个类中

ng-invalid 校验结果为无效的元素在这个类中

三、使用表单指令属性

3.1 适用于input元素的属性

ng-model 双向数据绑定

ng-change 用于指定一个表达式，该表达式在元素内容被改变时被计算求值

ng-minlength 设置一个合法元素所需的最小字符数

ng-maxlength 设置一个合法元素所需的最大字符数

ng-pattern 设置一个正则表达式，合法的元素内容必须匹配该正则表达式；当type属性值为email,url,number时，angularjs将会自动设置ng-pattern属性为相应的表达式，并检查格式是否匹配。对于这些类型的input元素不应再设置ng-pattern值。

ng-required 通过数据绑定设置required属性值

3.2 使用复选框

当type属性为checkbox时可适用于input元素的属性

ng-model

ng-change

ng-true-value 指定当元素被勾选时所绑定的表达式的值

ng-false-value 指定当元素被取消勾选时所绑定的表达式的值

ng-true-value ng-false-value属性的值将被用于设置所绑定的表达式的值，但是只在当复选框的勾选状态被改变时生效。也就是说模型属性（如果被隐式定义过的话）不会被自动创建，直到有用户与元素的交互发生时才会被创建。

3.3 使用选择列表

select元素的指令包括与Input元素类似的ng-required属性和可用于从数组和对象中生成option元素的ng-options属性

$scope.todos = [
    { id: 100, action: "Get groceries", complete: false },
    { id: 200, action: "Call plumber", complete: false },
    { id: 300, action: "Buy running shoes", complete: true }];

<select ng-model="selectValue" ng-options="item.action for item in todos"></select>
<p>Selected: {{selectValue || 'None'}}</p>

这是ng-options表达式的基本形式，形如“<标签>for<项目>in<数组>”这样的形式。生成的形式如下

<select ng-model="selectValue">
    <option value="?" selected="selected"></option>
    <option value="0">Get gorceries</option>
    <option value="1">Call plumber</option>
    <option value="2">Buy running shoes</option>
</select>

注意select元素的输出里包括了一个option元素，其值是一个问号并且没有任何内容。angularjs在ng-model属性所指定的变量值为undefined时会生成这样的元素。可以通过添加一个空值的option元素来替代默认的option元素

<select ng-model="selectValue" ng-options="item.action for item in todos">
    <option value="">(Pick One)</option>
</select>

默认情况下，用户选择了列表中某个选项之后，将会导致ng-model的表达式的值被更新为集合中的相应对象，结果如下：

selected:{"id":300,"action":"Buy running shoes","complete":true}

有时不想总使用整个源对象来设置ng-model的值，也可以使用一个稍微不同的表达式来为ng-options属性指定对象中的一个属性，如下：

<select ng-model="selectValue"  ng-options="item.id as item.action for item in todos">
      <option value="">(Pick One)</option>
</select>

在表单中的表达式形如<所选属性>as<标签>for<变量>in<数组>，并且指定了item.id为当用户选择某个选项时欲使用的值，显示结果如下：

selected：300

创建选项组元素

ng-options属性可以用来按照某个属性值将各个选项进行分组，为每个选项组生成一组optgroup元素。

 $scope.todos = [
      { id: 100, place: "Store", action: "Get groceries", complete: false },
      { id: 200, place: "Home", action: "Call plumber", complete: false },
      { id: 300, place: "Store", action: "Buy running shoes", complete: true }];

<select ng-model="selectValue" ng-options="item.action group by item.place for item in todos">
       <option value="">(Pick One)</option>
</select>

在表单中的表达式形如<所选属性>as<标签>group by<分组类别>for<变量>in<数组>

用于将对象进行分组的属性是在ng-options表达式中通过group by来进行指定的。

<select ng-model="selectValue">
    <option value="">(pick one)</option>
    <optgroup label="Store">
        <option value="0">Get groceries</option>
        <option value="2">Buy running shoes</option>
    </optgroup>
    <optgroup label="Home">
        <option value="1">Call plumber</option>
    </optgroup>
</select>