本文將半翻譯半總結(jié)的講講ng2官網(wǎng)的另一個未翻譯高級教程頁面。

文章目的是使用ng2提供的響應(yīng)式表單技術(shù)快速搭出功能完善豐富的界面表單組件。

響應(yīng)式表單是一項響應(yīng)式風格的ng2技術(shù)，本文將解釋響應(yīng)式表單并用來創(chuàng)建一個英雄詳情編輯器。

包含內(nèi)容：

響應(yīng)式表單介紹 開始搭建 創(chuàng)建數(shù)據(jù)模型 創(chuàng)建響應(yīng)式的表單組件 創(chuàng)建組建的模板文件 引入ReactiveFormsModule 顯示HeroDetailComponent 添加一個FormGroup 看看表單模型 介紹FormBuilder 驗證的需求 放置FormGroup 檢查FormControl屬性 使用setValue以及patchValue設(shè)置表單模型數(shù)據(jù) 使用FotmArray提供FormGroup的數(shù)組 觀察控件的更改

 響應(yīng)式表單介紹

angular提供了兩種表單搭建技術(shù): 響應(yīng)式表單和模板驅(qū)動式表單。都依賴于@angular/forms庫，并共享了一些通用的表單控件集。
但是他們在原理、代碼風格以及技術(shù)上存在區(qū)別。他們甚至有自己的模塊：ReactiveFormsModule以及FormsModule。

響應(yīng)式表單（ReactiveFormsModule）：

anguar的響應(yīng)式表單簡化了管理數(shù)據(jù)時響應(yīng)式風格的編碼實現(xiàn)，使用了在無視圖數(shù)據(jù)模型(從服務(wù)器獲取)以及以視圖為導(dǎo)向的模型用于保持屏幕上HTML控件顯示的值與狀態(tài)。響應(yīng)式表單提供了響應(yīng)式模式測試以及驗證上的便利。

使用響應(yīng)式表單，你將在組件類中創(chuàng)建一個anular的表單控件樹對象，并在組件模板中使用提供的技術(shù)綁定到原生表單控件標簽中。

你直接在組件類中創(chuàng)建并操作控件對象。因為組件類能直接訪問到數(shù)據(jù)模型以及表單控件結(jié)構(gòu)，你可以將數(shù)據(jù)模型值推送到表單控件以及將用戶的更改響應(yīng)到后邊來。組件可以觀察表單控件狀態(tài)的更改并響應(yīng)這些更改。

直接使用表單控件對象工作的一個好處是值以及驗證的更新總能夠同步完成并受你控制。你不會遇到有時候因為模板驅(qū)動表單造成的時間問題，并且響應(yīng)式表單更易測試。

為了保持響應(yīng)的一致性，組件會保存不一致的數(shù)據(jù)模型，將其視為純粹的原始值。不會直接更新數(shù)據(jù)模型，組件會提取用戶的更改并轉(zhuǎn)發(fā)到外面的組件或服務(wù)中，(可能是用來保存他們的)并返回一個新數(shù)據(jù)模型到組件，用于響應(yīng)模型狀態(tài)的更新。

使用響應(yīng)式表單指令不需要你依賴于全部響應(yīng)式原理，但是這確實能促進響應(yīng)式編程方法如果你選擇了要使用這個方法的話。

模板驅(qū)動式表單（FormsModule）：

模板驅(qū)動式的表單使用了完全不同的方式。

你在組件模板中放置HTML表單控件(input這些)并使用比如ngModel這些指令綁定到數(shù)據(jù)模型屬性。

你不需要創(chuàng)建angular表單控件對象，因為angular會根據(jù)你的數(shù)據(jù)綁定信息自動幫你創(chuàng)建出來。你不是推送或者拉取數(shù)據(jù)值。angular在ngModel中幫你處理了。angular會更新那些被改變的數(shù)據(jù)值。