摘要：表單和其中的表單控件提供了驗證服務，可以讓用戶在提交一般在點擊類型為的按鈕時提交表單前意識到自己有非法不符合要求，以下都將稱為非法的輸入。為了編寫一個可靠的應用程序，服務端驗證是不可或缺的。促發條件至于自定義表單驗證，我會另寫一篇。

網頁中用戶于服務端交互數據的表單控件有input、select、textarea，而表單是將為了達到一個目的（登錄、注冊等）各種控件整合到一起的一個集合。
表單和其中的表單控件提供了驗證服務，可以讓用戶在提交（一般在點擊類型為submit的按鈕時提交）表單前意識到自己有非法（不符合要求，以下都將稱為非法）的輸入。這種驗證方式（客戶端驗證）提供了比多帶帶的服務端驗證更好的用戶體驗，因為用戶在輸入后得到實時的反饋，修正輸入的信息。
但是雖然說客戶端驗證提供了更好的用戶體驗，但是服務端驗證也是不可或缺的，因為客戶端驗證并不可靠而且很容易被繞過。為了編寫一個可靠的應用程序，服務端驗證是不可或缺的。

用于理解雙向數據綁定的關鍵指令是ngModel（指令在視圖中使用時需要將大寫字母裝換為-x，例如ng-model），ngModel（ngBind）指令提供了模型與視圖之間的雙向數據綁定的方法。另外，ngModel為其他指令擴展其行為提供了API（應用程序編程接口）。

  
    
  
        
  
            姓名：  
              
        
  
        
  
            郵箱：  
              
        
  
        
  
            性別：  
              
                 男  
              
              
                 女  
              
        
  
        
  
            保存  
            重置  
        
  
    
  
    
  
        user:{{ user | json }}  
    
  
    
  
        User:{{ User | json }}  
    
  
      
 

這里有幾個需要注意的點：

novalidate是用來禁用瀏覽器自帶的驗證。

ngModel的值不會被設置，直到通過了控件的驗證，比如說type=email必須為xxx@xxx的形式，可以仔細看下方user中email字段的變化。

建議不要使用type=reset的按鈕，會將輸入框清空，但不會重置數據模型中的值，原因未知。

在不同的驗證狀態下，ngModel為控件和表單提供了一些css類（需要在樣式表中聲明）：

ng-valid:數據模型合法

ng-invalid:數據模型不合法

ng-valid-[key]:每一個通過$setValidity添加的合法鍵

ng-invalid-[key]:每一個通過$setValidity添加的不合法的鍵

ng-pristine:還沒有與用戶交互（輸入過）的控件

ng-dirty:與用戶交互過的控件

ng-touched:失去過焦點的控件（鼠標點上去獲得，點其他地方失去）

ng-untouched:沒有失去過焦點的控件

ng-pending:任何沒有結束（與服務端交互）的異步驗證

這里簡單的演示ng-invalid和ng-touched
html:

    
    
    
        姓名：    
            
    
    
    
    
        郵箱：    
            
    
    
    
    
        性別：    
            
             男    
            
            
             女    
          
    
    
    
    
        保存    
    
  
  

css:

.ng-invalid.form-control {  
border-color: #E96666;  
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(233, 102, 102, 0.6)  
}  
.ng-touched.form-control {  
border-color: #66E985;  
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 233, 160, 0.6)  
}  

第一個輸入框因為是必須的,所以是非法的狀態,所以angular會給這個控件添加ng-invalid樣式,在輸入后變為合法,該樣式去除,在失去焦點后ng-touched樣式添加

表單是FormController的一個實例，我們可以用表單的name屬性將表單暴露到作用域中。
相似的，一個有數據綁定(有ngModel)的表單控件也是NgModelController的實例，也可以通過表單實例的屬性(控件的name)暴露到作用域中。
我們可以通過這個特性擴展我們上一個例子:

在用戶與表單控件交互后再展示錯誤信息

在用戶點擊提交之后再展示錯誤信息

  
    
  
        姓名:  
          
    
  
    
  
        注意！  
        姓名不能為空  
    
  
    
  
        email:  
          
    
  
    
  
        性別:  
          
              
                 男  
              
              
                 女  
              
          
    
  
    提交  
  

注意一下，$submitted表示是否點擊過提交(type=submit)按鈕,開發遇到問題的時候，大家也可以把$error打印出來看下，表單和表單中的控件都有$error對象，這里我都打印出來了

在默認情況下，對數據的任何改變都會促發模板的更新和表單驗證。我們可以使用ngModelOptions指令去重寫這個行為，使只有在特定的條件下才觸發。
比如說

ng-model-options="{ updateOn: "blur" }"  

會只在表單控件失去焦點時觸發，我們也可以設置多個事件來觸發，只要使用空格隔開即可

ng-model-options="{ updateOn: "mousedown blur" }"  

如果想把原有的保存，只是想加一個觸發條件的話，可以加上default在列表中

ng-model-options="{ updateOn: "default blur" }"  

一個完整點的例子:
html:

  
    
  
        
促發條件: blur
  
          
        {{ user.name }}  
    
  
    
  
        
正常
  
          
        {{ user.phone }}  
    
  
  

我們可以通過ngModelOptions的debounce 關鍵字來使數據綁定延遲，這個延遲對解析器，驗證和表單的屬性($dirty,$pristine等)都會生效。
寫法也很簡單

ng-model-options="{ debounce: 500 }"  

ngModelOptions是可以繼承的，所以如果有多個控件都需要這個效果，可以在他們的父元素上添加這個指令，除非子元素重寫這個屬性。

  
    
促發條件: blur
  
      
    {{ user.name }}  
  

至于自定義表單驗證，我會另寫一篇。剛開博客沒多久，希望大家有任何問題或者意見都在下方提出，或者加我qq 651882883。