Angular4的表單

Angular4的表單分爲兩種，一個是模板式表單，另外一種是響應式表單。
首先先講一下數據模型：數據模型不是任意一種對象，是一種用於存儲表單數據的數據結構。
模板式表單
該表單的數據模型是由組件模板上相關的指令定義（隱式建立）的，由於使用了這種方式定義表單的數據模型會受限於html語法，因此只適合用於一些簡單的場景。
模板式表單有三個api：ngForm、ngModel、ngModelGroup（這三個api在模板上均可以使用模板本地變量進行實例化，所以能夠將該模板本地變量傳進控制器）
==>（先講一下，ngForm、ngModel這兩個指令在模板上是直接添加在標籤上便可）
首先講一下ngForm：
ngForm是表明了整個form表單，在建立form表單的時候，angular會自動添加到form標籤上（等同於<form ngForm></form>）
其工做原理是：建立了ngForm後，angular會隱式建立一個FormGroup類的實例，而後ngForm會尋找其子元素中標有ngModel的標籤的值，並添加在FormGroup中。而後頁面上便可經過ngForm這個對象訪問到表單數據。由於ngForm可使用模板本地變量引用，故可使用（ngSubmit）=「xxx（#ngForm）」事件進行傳遞到控制器。
固然，不必定要在form表單使用ngForm，能夠在div等標籤內使用，此時須要手動添加指令。
若是不想被Angular接收表單，能夠添加ngNoForm指令便可。
ngModel
該指令表示了表單內的一個控件。剛剛說到的ngForm會尋找表單內有ngModel的標籤，就是說這個標籤。
該標籤的工做原理是：添加了該指令後，angular會隱式建立一個FormControl類，用於存儲其值。
這個指令是直接添加到標籤上

<input ngModel name="text">1複製代碼

可是還要添加name屬性（由於這個ngModel標誌的控件的值會被添加到FormGroup中，而FormGroup的參數是個對象，對象必需要有key）。
固然這個指令也可使用模板本地變量，一樣也能夠經過該變量得到其值

<input #text="ngModel" name="text">1複製代碼

ngModelGroup
該指令表示的是表單的一部分，即多個ngModel的集合。用於區分開來某些特別的ngModel控件。
其工做原理與ngForm相似，也是隱式建立一個FormGroup類用於存儲其包括的控件的值。其在ngForm中的表現爲嵌套。
不過他的用法是須要賦值一個名稱（用於存儲在ngForm中）

響應式表單
使用響應式表單時，經過編寫typescript而不是html代碼建立一個底層數據模型，在這數據模型定義以後，使用一些特定指令將模板的html代碼與數據模型進行鏈接起來。
因此使用響應式表單分爲兩步：
（1）編碼建立一個底層數據模型；
（2）使用特定的指令將模板的html代碼與數據模型進行鏈接起來。
首先講一下建立底層數據模型
Angular/forms提供三個類進行建立底層數據模型：FormControl、FormGroup、FormArray

FormControl
這個類是響應式表單的基本單位，也就是每一個表單控件都要定義一個該類。

userName:FormControl=new FormControl("aaa")1複製代碼

其內的參數表示該控件的初始值

FormGroup

myForm:FormGroup=new FormGroup({})1複製代碼

該類能夠用於表示整個表單、也能夠用於表示部分表單
該類的參數內是一個對象，期內保存了該類包括的控件（FormControl）的值（是一組key:value對）

FormArray

partForm:FormArray=new FormArray([])1複製代碼

該類和FormGroup相似，也是一些控件的集合，可是和其區別是，FormArray是表示的是可增加的字段集合，而FormGroup是固定字段集合。
（使用場景：在表單中可能有多個email要添加，此時就可使用該類進行包括）
其參數值是個數組，因此通常會與*ngFor一塊兒用

再講一下鏈接的表單指令
表單指令有兩種：屬性綁定指令、屬性名定義指令
FormGroup—>formGroup—>formGroupName
FormControl—>formControl—>formControlName
FormArray—>null—>formArrayName
（記得一點，對於屬性名指令是必定要早formGroup範圍內使用）
這些指令都是在模板中使用。
首先先建立一個FormGroup類的數據模型，該數據模型會表明了整個表單。所以在模板中form標籤內添加一個屬性綁定，即

<form [formGroup]="myForm">1複製代碼

而該FormGroup類實例的參數–>{},內就是存放該表單內的全部控件的值（也就是FormControl和FormArray的控件）。
而後在定義了formGroup屬性的表單內，每一個控件都要定義其名字，使用的指令就是FormGroupName、FormControlName、FormArrayName這三種指令。

<form [formGroup]="formModel" (submit)="onSubmit()">
    <div formGroupName="dateRange">
        起始日期:<input type="date" formControlName="from">
        截止日期:<input type="date" formControlName="to">
    </div>
    <div>
        <ul formArrayName="emails">
            <li *ngFor="let e of this.formModel.get('emails').controls; let i =index;">
                <input type="text" [formControlName]="i"  />
            </li>
        </ul>
        <button type="button" (click)="addEmail()">增長郵箱</button>
    </div>
    <div>
        <button type="submit">提交</button>
    </div>
</form>1234567891011121314151617複製代碼

講一下對於取得FormGroup實例對象內的參數對象內的控件名稱對應的值的方法：this.formModel.get(‘emails’)；用get()方法