1. 說明
表單是Web程序中的重要組成部分，構建良好以及實用的表單必須解決如下幾個問題：
(1). 如何跟蹤及更新表單的數據狀態
(2). 如何進行表單驗證
(3). 如何顯示表單驗證信息
Angular2針對如何解決復雜的表單問題，提供了Template Driven和Model Driven兩種模式。
2. Template Driven
Angular2 提供了NgModel指令來提供雙向綁定，通過雙向綁定來同步跟蹤表單的數據變化，十分簡單與易用。通過NgModel指令創建的表單必須結合DOM模板才能使用，所以稱之為Template Driven方式。我們來看一個采用NgModel創建表單的示例：
| import { Component, OnInit } from '@angular/core'; @Component({ moduleId: 'portal', selector: 'portal', template: `<form #f="ngForm" class="form" role="form"> <legend>Form title</legend> <div class="form-group"> <label for="">name:</label> <input type="text" class="form-control" name="name" id="name" [(ngModel)]="name" required> </div> <button type="submit" class="btn btn-primary" [disabled]="!f.valid">Submit</button> </form>` }) export class PortalComponent implements OnInit { name: string; constructor() { } ngOnInit() { } } |
我們實現了一個簡單的輸入表單，使用ngFrom創建一個表單，包含一個名稱為name的必錄框和一個提交按鈕。模型類中幾乎木有什么內容。Template Driven中的校驗是通過在模板中針對各個模塊添加校驗性指令實現的，例如給name輸入框添加必錄性校驗required。
3. Model Driven
接下來我們來創建一個Model Driven的示例，如下
| import { Component, OnInit } from '@angular/core'; import { FormGroup, FormBuilder, FormControlName, Validators } from '@angular/forms'; @Component({ moduleId: 'portal', selector: 'portal', template: `<form [formGroup]="f" class="form" role="form"> <legend>Form title</legend> <div class="form-group"> <label for="">name:</label> <input type="text" class="form-control" name="name" id="name" formControlName="name"> </div> <button type="submit" class="btn btn-primary" [disabled]="!f.valid">Submit</button> </form>` }) export class PortalComponent implements OnInit { f: FormGroup; constructor(private fb: FormBuilder) { } ngOnInit() { this.f = this.fb.group({ 'name': ['', [Validators.required]] }) } } |
雖然表面上看上去差不多，但是Model Driven和Template Driven還是存在部分區別。首先，不同於采用ngFrom指令來創建表單，Model Driven采用formGroup來創建表單，同事錄入框的指令也不同於ngModel，而是使用formControlName。組件類也存在較大區別，Model Driven創建的表單實際的控制邏輯是在組件類中實現的，我們看到FormGroup是通過FormBuilder創建出來的來的，並且針對FormGroup的每個組件可以通過Validators類型進行編碼來實現校驗。例如，給name組件加上必錄性校驗required。
4. 表單驗證
Angular2跟蹤輸入框的三種狀態信息，並應用相應的css樣式，分別如下：
(1). touched or untouched 是否訪問過
(2). valid or invalid 是否有效
(3). pristine or dirty 是否變化過
同樣的，Angular2跟蹤整個表單的狀態，可以使用來禁止及啟用提交表單。
我們來了解一下表單驗證是如何工作的。
Template Driven模式中，首先，Angular會自動的給form表單應用一個ngForm指令，該指令會在內部創建一個FromGroup。 其次，每個ngModel指令會在內部創建一個匿名的FormControl，並將注冊到FromGroup中，而校驗類指令例如required等則會和FormControl綁定。當改變輸入時，則會觸發FormControl中對應的OnChange事件觸發校驗等。
在Model Driven模式中，在對應的組件類中編碼創建FromGroup，每個子類型為FromControl對象，在創建FromControl子類型中可以使用Validators綁定對應的校驗方法，最后采用屬性的方式和表單進行綁定。在模板中，利用formControlName指令將FromControl元素和對應的輸入框鏈接起來，當改變輸入時，則會觸發FormControl中對應的OnChange事件觸發校驗等。
我們知道了校驗是如何工作的以及校驗的對應的狀態信息，我們可以根據這些信息進行相應狀態判斷與顯示。例如，通過控制表單的valid的狀態來禁用提交按鈕等。
5. 聯合使用
Template-Driven方式在展現數據以及實現表單初始化上非常方便與直觀，而Model-Driven方式在添加校驗，監控數據改變以及自動化測試方便具有突出的有點。在某些情況下，我們可以聯合使用這兩種方式，例如
(1). 我們可以使用ngModel去讀取數據，使用fromGroup添加校驗信息並監控數據變化
(2). 我們可以添加一個引用來指向單個輸入框的control信息，並利用該應用來實現單個組件狀態信息的顯示