angular表单验证

AngularJs中的表单

• 凡是在Angular模板控制范围内的form都会关联一个FormController

• 凡是带有ngModel指令的表单元素都会关联一个NgModelController

• FormController和NgModelController共同作用，实现了Angular表单中的输入状态管理和数据验证功能：

  如果希望在指令中使用FromControler/NgModelControler的属性需要为
  form标签和表单元素标签指定name属性（在指令（ng-show等）中通过
  name可以访问FormController/NgModelControler对象）
  

• 注意：
  使用Angular表单验证时，通常要关闭浏览器的自动验证功能，即在form上设置
  novalidate

  使用ng-pattern指令时，如果希望直接指定正则表达式，则需要加 '' 号
  否则会被当成作用域中的属性名
  另外Angular会自动在正则表达式开头加上 ^ 在结尾加上 $ ，请勿重复添加！
  

1. FormController常用属性：

   $pristine   boolean	整个表单是否是干净的（未被修改过）
   $dirty  boolean  表单是否被修改过（任意一个表单元素被修改都算数）
   $valid   boolean  整个表单是否验证通过
   $invalid   boolean	表单是否未通过验证
   $pending   boolean	   表单是否有挂起的（未完成的，主要是异步验证）验证
   $submitted   boolean  是否已经提交过（如点击过提交按扭但是验证失败了）
   $error    Object  包含了所有未通过验证的验证规则
               $error对象的属性是验证规则的名称
               $error对象的属性值是相应的表单元素或表单
   

2. 内置验证规则的名称（$error对象的属性名称）：

   email
   max
   maxlength
   min
   minlength
   number
   pattern
   required
   url
   date
   datetimelocal
   time
   week
   month
   
   

3. 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属性的值