AngularJs中的表单
- 凡是在Angular模板控制范围内的form都会关联一个FormController
- 凡是带有ngModel指令的表单元素都会关联一个NgModelController
FormController和NgModelController共同作用,实现了Angular表单中的输入状态管理和数据验证功能:
如果希望在指令中使用FromControler/NgModelControler的属性需要为form标签和表单元素标签指定name属性(在指令(ng-show等)中通过name可以访问FormController/NgModelControler对象)
注意:
使用Angular表单验证时,通常要关闭浏览器的自动验证功能,即在form上设置 novalidate使用ng-pattern指令时,如果希望直接指定正则表达式,则需要加 '' 号否则会被当成作用域中的属性名另外Angular会自动在正则表达式开头加上 ^ 在结尾加上 $ ,请勿重复添加!
FormController常用属性:
$pristine boolean 整个表单是否是干净的(未被修改过)$dirty boolean 表单是否被修改过(任意一个表单元素被修改都算数)$valid boolean 整个表单是否验证通过$invalid boolean 表单是否未通过验证$pending boolean 表单是否有挂起的(未完成的,主要是异步验证)验证$submitted boolean 是否已经提交过(如点击过提交按扭但是验证失败了)$error Object 包含了所有未通过验证的验证规则 $error对象的属性是验证规则的名称 $error对象的属性值是相应的表单元素或表单
内置验证规则的名称($error对象的属性名称):
emailmaxmaxlengthminminlengthnumberpatternrequiredurldatedatetimelocaltimeweekmonth
NgModelController的常用属性:
``` $error Object 包含了所有未通过验证的验证规则 $error中的属性名称是验证规则的名称 $error中的属性值是true$pending Object 包含了所有挂起的验证规则
$pending中的属性名称是验证规则的名称 $pendiing中的属性值是true$untouched boolean 是否从未被点击/触摸过
$touched boolean 是否失去过焦点 $pristine boolean 是否从未被修改过 $dirty boolean 是否被修改过 $valid boolean 是否所有的验证都验证通过 $invalid boolean 是否验证未通过 $name string 表单元素name属性的值 ```