原文

　　https://www.jianshu.com/p/c772d143e1fc

大綱

　　1、對表單的理解
　　2、模板驅動表單(Template Driven Forms)
　　3、響應式表單(Reactive Forms )
　　4、響應式表單和模板驅動表單的區別和聯系
　　5、FormControl、FormGroup——angular基礎的表單對象

對表單的理解

1、事實證明，表單最終可能是非常復雜的。原因如下：

　　1.1、表單輸入意味著需要在頁面和服務器端同時修改這份數據；
　　1.2、修改的內容通常要在頁面的其他地方反映出來；
　　1.3、用戶的輸入可能存在很多問題，所以需要驗證輸入的內容；
　　1.4、用戶界面需要清晰地顯示出可能出現的預期結果和錯誤信息；
　　1.5、字段之間的依賴可能存在復雜的業務邏輯；我們希望不依賴DOM選擇器就能輕松測試表單。

2、值得慶幸的是，Angular已經給出了上述所有問題的解決方案。

　　2.1、表單控件（FormControl）封裝了表單中的輸入，並提供了一些可供操縱的對象。
　　2.2、驗證器（validator）讓我們能以自己喜歡的任何方式驗證表單輸入。
　　2.3、觀察者（observer）讓我們能夠監聽表單的變化，並作出相應的回應。

模板驅動表單(Template Driven Forms)

　　1、模板驅動(也叫模型驅動/Model Driven)表單是同步類型的表單。
　　2、模版驅動的表單和 AngularJS 對於表單的處理類似，把一些指令（比如 ngModel ）、數據值和行為約束（比如 require 、minlength 等等）綁定到模版中。總體來說，這種類型的表單通過綁定把很多工作交給了模版。
　　3、進行模版驅動類型的表單處理的一個必要步驟就是建立數據的雙向綁定，通過ngModel進行雙向綁定

響應式表單(Reactive Forms )

　　1、響應式表單(Reactive Forms )是異步類型的表單。
　　2、響應式表單乍一看還是很像模板驅動型表單的，但響應式表單需要引入一個不同的模塊： ReactiveFormsModule 而不是 FormsModule
　　3、響應式表單區別於模板驅動型表單的的主要特點在於：是由組件類去創建、維護和跟蹤表單的變化，而不是依賴模板。

響應式表單和模板驅動表單的區別和聯系

　　1、其實表單的創建都是表單的基礎對象FormControl、FormGroup這兩個基礎表單對象的創建，不同點在於，模板驅動表單的創建是隱式的，即引入了FormsModule就自動在每個form對象創建了FormControl、FormGroup，只不過我們需要通過顯示的命名name和牽引ngForm才可以調用對應的表單對象；而對於響應式表單，是顯示的創建FormGroup和FormControl，無論是在每個form對象中添加FormGroup還是在每個表單控件添加FormControlName都是顯示的創建表單對象並且獲取對應表單的控制權限。
　　2、[(ngModel)]並不能說是模板驅動型表單和響應式表單之間的區別，因為在響應式表單中我們也可以調用ngModel來讓表單模型數據和數據模型數據關聯起來（需要註意的是，使用ngModel，利用formControl創建的初始值是沒有效果的會被ngModel覆蓋），兩個表單的本質區別在於：模板驅動表單的FormControl和FormGroup都是在模板上通過添加對應的name和ngForm來創建的，乃至其校驗的方式也是在模板上添加對應的標簽從而來添加校驗，唯一與數據模型有管理的是通過ngModel和數據模型數據相關聯。而對應的響應式表單也就是模型驅動表單的所有FormGroup和FormControl都需要在組件中創建添加控制權限，乃至校驗規則也是需要在後臺賦予的，和模板唯一關聯的是需要通過顯示的在模板中添加FormGroup和FormControlName來關聯對應的表單和表單控件。
　　3、響應式表單和模板驅動表單添加校驗規則的方式不一樣，因此它們的自定義校驗指令的創建方式也是不同的，雖然最終都是要繼承validator。
　　4、響應式表單和模板驅動表單兩者表單提交的方式是一樣的
　　5、不管是模板表單還是響應式表單，都存在兩個模型，表單模型和數據模型，做到兩個模型的格式相匹配可以讓代碼的可讀性提高很多。
　　總而言之：表單是關聯數據、管理數據的工具，模板驅動表單是異步的，表單組件的創建和校驗在於模板中；響應式表單是同步的，表單組件的創建和校驗集中於組件之中。

FormControl、FormGroup——angular基礎的表單對象

　　1、FormControl和FormGroup是Angular中兩個最基礎的表單對象。
　　2、FormControl代表單一的輸入字段，它是Angular表單中的最小單元。
　　3、FormControl封裝了這些字段的值和狀態，比如是否有效、是否臟（被修改過）或是否有錯誤等。
　　4、大多數表單都擁有不止一個字段，因此我們需要某種方式來管理多個FormControl。假設我們要檢查表單的有效性。如果要遍歷這個FormControl數組並檢查每一個FormControl是否有效，必然相當繁瑣；而FormGroup則可以為一組FormControl提供總包接口（wrapperinterface），來解決這種問題。

angular表單知識點