本節書摘來自華章出版社《angularjs實戰》一 書中的第2章，第2.4節，作者：陶國榮，更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視。
在介紹完angular中的模闆内容定義的方法之後，接下來介紹子產品中一個非常重要的控件——表單控件。表單是各類控件（如input、select、textarea）的集合體，這些控件依附于表單，形成dom元素中最為重要的資料互動元素，而angular也對表單中的控件做了專門的包裝，其中最重要的一項就是控件的自我驗證功能，接下來我們逐一進行介紹。
在angular中，專門針對表單和表單中的控件提供了下列屬性，用于驗證控件互動值的狀态。
$pristine 表示表單或控件内容是否未輸入過。
$dirty表示表單或控件内容是否已輸入過。
$valid 表示表單或控件内容是否已驗證通過。
$invalid 表示表單或控件内容是否未驗證通過。
$error 表示表單或控件内容驗證時的錯誤提示資訊。
前面4項屬性均傳回布爾類型的值，最後一項屬性傳回一個錯誤對象，包含全部表單控件驗證時的傳回的錯誤資訊。接下來，通過一個簡單的示例來示範表單控制驗證的過程。
示例2-13 表單基本驗證功能
（1）功能描述
在頁面的表單中，添加兩個文本框輸入元素，第一個用于輸入姓名，要求輸入内容不能為空；第二個用于輸入郵件位址，除輸入内容不為空時，郵件位址的格式必須正确，當表單驗證失敗時，“送出”按鈕将不可用。
（2）實作代碼
建立一個html檔案2-13.html，加入如代碼清單2-13所示的代碼。
代碼清單2-13 表單基本驗證功能
（3）頁面效果
執行html檔案2-13.html，最終實作的頁面效果如圖2-13所示。
（4）源碼分析
在本示例的源碼中，當建構應用控制器代碼時，先添加與頁面層輸入文本框相對應的兩個屬性“name”和“email”，再添加一個“save”方法，用于單擊“送出”按鈕時執行。
在頁面代碼中，為了使用angular中提供表單控件的驗證屬性，必須在輸入文本框中添加“ng-model”指令并綁定控制器中添加的相應屬性名，否則，無法執行angular的表單控件的驗證功能，這點必須注意。
然後，再添加元素，将驗證時傳回的錯誤資訊狀态作為“ng-show”指令值，用于控制元素的顯示或隐藏，如果錯誤資訊狀态傳回true，表示出現錯誤，那麼顯示元素中的提示資訊，反之，隐藏元素。
最後，在添加“送出”按鈕時，将該按鈕的不可用性“ng-disabled”指令與表單是否未驗證成功的屬性值相綁定，即如果傳回true，表示表單驗證未成功，那麼“送出”按鈕的不可用性也為true，變為不可用的灰色，否則變為可以單擊的可用狀态。
在表單控件中，checkbox控件和radio控件與元素的其他類型控件不同，這兩個控件不具有angular的控件驗證功能，而且checkbox有選中和非選中兩種狀态，而radio隻有一種選中狀态。checkbox控件和radio控件都可以通過“ng-model”指令綁定控制器的屬性，一旦綁定完成，在首次加載時，将以綁定的屬性值作為控件初始化的
狀态。
接下來，通過一個簡單的示例來示範這兩個控件操作的過程。
示例2-14 表單中的checkbox和radio控件
在頁面的表單中，分别添加一個“type”類型為“checkbox”和兩個“type”類型為“radio”的元素，并添加一個“送出”按鈕，當單擊此按鈕時，顯示這些表單控件所選中的值。
建立一個html檔案2-14.html，加入如代碼清單2-14所示的代碼。
代碼清單2-14 表單中的checkbox和radio控件
執行html檔案2-14.html，最終實作的頁面效果如圖2-14所示。
在本示例的源碼中，當建構應用的控制器代碼時，先向$scope對象添加“a”和“b”兩個屬性，分别用于表單中checkbox控件和radio控件的資料綁定。同時，這兩個屬性的初始值決定控件元素顯示的初始化狀态。
然後，在頁面代碼中，當添加“checkbox”類型控件時，除了添加“ng-mode”指令綁定控制器中的屬性外，還添加了“ng-true-value”和“ng-false-value”指令，前者表示選中時傳回的值，後者表示未選中時傳回的值。另外，在添加“radio”類型控件時，隻要将多個控件的“ng-mode”指令值設為相同，這些“radio”類型控件就隻有一個選中時的值，并且，當一個選中時，其他控件自動變成非選中的狀态。
最後，當單擊“送出”按鈕時，将執行控制器中的“save”方法。在該方法中，将綁定控件後的“a”和“b”屬性值賦予新添加的屬性“c”，而“c”屬性又通過雙花括号的方式被綁定在
元素中，是以，在單擊“送出”按鈕後，控件選中的值将顯示在元素中。
在angular中，與其他表單中的控件元素相比，select控件的功能要強大很多，它可以借助“ng-options”指令屬性，将數組、對象類型的資料添加到元素中，同時還能在添加資料時進行分組顯示。select控件綁定資料的形式有下列幾種。
（1）綁定簡單的數組資料
這種方式是最為常用，也是最為簡單，隻需要在控制器中添加一個數組，代碼如下。
然後，在頁面控件中，通過“ng-options”指令屬性值，采用“…for…in…”格式将數組與控件綁定，代碼如下。
在上述頁面代碼中，必須添加“ng-model”屬性，否則無法綁定控制器中的數組，并且“ng-model”的屬性值就是類型控件的選中值，它們之間是雙向綁定的關系。
（2）綁定簡單的對象資料
除綁定簡單的數組外，類型控件還可以綁定一個對象，實作過程也非常簡單，隻要先在控制器中添加一個對象，代碼如下。
然後，在頁面類型控件中，通過“ng-options”指令屬性值，采用“…as…for…in…”格式将對象與類型控件綁定，代碼如下。
在上述頁面代碼中，在設定類型控件的“ng-options”屬性值時，“as”前面部分對應元素的value值，用于選中時擷取，“as”後面部分對應元素的text值，用于直接顯示。
（3）以分組的形式綁定對象資料
除直接綁定對象資料外，還可以将對象中的資料進行分組綁定顯示。實作的方式也很簡單，隻要先在控制器中添加一個有分組成員的對象資料，代碼如下。
在上述代碼中，如果對象“data”中的“key”為分組成員，那麼，在頁面控件的“ng-options”屬性中采用“…as…group by…for…in…”格式，可以實作對象按“key”成員分組綁定并顯示的功能，代碼如下。
通過上面幾種類型控件綁定資料的介紹，相信大家對在angular中使用控件有了一個初步的認識。接下來，再通過一個完整的示例來詳細示範類型控件的使用方法。
示例2-15 表單中的select控件
在頁面的表單中，分别添加兩個表單控件。第一個綁定一個普通的對象，第二個綁定一個帶分組顯示的對象。當選擇這兩個控件的選項時，分别顯示所選中的選項值。
建立一個html檔案2-15.html，加入如代碼清單2-15所示的代碼。
代碼清單2-15 表單中的select控件
執行html檔案2-15.html，最終實作的頁面效果如圖2-15所示。
在建構本示例的控制器代碼時，為了向頁面中的兩個表單控件提供資料源，先分别添加兩個資料對象a_data和b_data，并且在b_data資料對象中指定“grade”屬性為分組綁定顯示的成員，即按該屬性名進行分組綁定對象資料。
然後，為了動态擷取兩個select表單控件選中的值，在控制器中分别添加了兩個屬性a和b，用于控件的“ng-model”屬性值的綁定，當這兩個屬性與頁面中的兩個控件綁定之後，在控制器代碼中就可以調用這兩個屬性值來擷取控件目前所選中的選項值。
最後，在控制器代碼中添加了兩個方法“a_change”和“b_change”，分别用于綁定兩個<code><select></code>表單控件的“ng-change”事件，在觸發事件執行綁定方法的過程中，分别将<code><select></code>控件選中的值作為新添屬性“a_show”和“b_show”的值，這兩個屬性又與頁面中的兩個元素進行雙向綁定。是以，最終實作将選擇的内容值顯示在頁面中。
在兩個<code><select></code>控件的“ng-options”屬性值中，分别采用“…as…for…in…”和“…as…group by …for…in…”的格式，實作對控制器中a_data資料對象的綁定和b_data資料對象的分組綁定。在分組綁定顯示時，“group by”後直接指定分組的對象屬性名，本示例為“grader”屬性名，在分組綁定對象資料後，最終顯示的頁面效果，如圖2-15所示。