("▔□▔)，又遇到了錯誤驳遵，似曾相識淫奔。分析錯誤原因，上網(wǎng)搜索堤结，解決錯誤搏讶。不知道做了多少次這個動作，在Angular Form這個知識點上霍殴。so，為了不重復(fù)干活系吩，就用了兩天的時間整理了我對Angular Form表單的理解来庭。
先簡單的來說下Angular Form表單，F(xiàn)orm穿挨，是商業(yè)應(yīng)用的支柱月弛，一般，我們用它來登錄科盛、預(yù)定機(jī)票帽衙、安排會議等等一些數(shù)據(jù)錄入任務(wù)。在Angular中構(gòu)建表單的技術(shù)有兩種：響應(yīng)式表單和模板驅(qū)動表單贞绵。它們都屬于@angular/forms庫厉萝，并且共享一組公共的表單控件類。但是在設(shè)計哲學(xué)榨崩、編程風(fēng)格和具體技術(shù)有顯著區(qū)別谴垫，所以他們有自己的模塊：ReactiveFormsModule和FormsModule。
響應(yīng)式表單
是一種響應(yīng)式編程風(fēng)格母蛛，傾向于在非UI的數(shù)據(jù)模型（通常接收服務(wù)器）之間顯式的管理數(shù)據(jù)流翩剪，并且用一個UI導(dǎo)向的表單模型來保存屏幕上HTML控件的狀態(tài)和值。模板驅(qū)動表單
使用Angular模板語法和表單里的指令編寫的表單就是模板驅(qū)動表單彩郊。在模板驅(qū)動表單中前弯，Angular會自動在form標(biāo)簽中附加一個NgForm指令，它會為form標(biāo)簽增加額外的特性秫逝，它會控制那些帶NgModel指令和name屬性的元素恕出，它有自己的valid屬性，只有在表單中每個控件都有效時才為真筷登。
其次剃根，在看完了Angular Form官方文檔后,我整理出Angular Form的關(guān)鍵詞：
- FormBuilder
- FormGroup
- FormControl class
- FormArray
- AbstractControl
- FormControlName
- FormControl Directive
接下來就一一詳細(xì)介紹它們。
FormBuilder
FormBuilder前方，根據(jù)程序員的配置狈醉，創(chuàng)建一個AbstractControl表單廉油。在組件中使用FormBuilder時，必須在模塊中倒入ReactiveFormsModule苗傅。
FormGroup抒线、FormControl class、FormArray
FormGroup渣慕、FormControl class嘶炭、FormArray他們是Angular定義窗體的三個基本構(gòu)建塊。
-
FormGroup逊桦，跟蹤一組FormControl實例的值和有效性狀態(tài)眨猎，FormGroup將每個子FormControl的值聚合到一個對象中，每個控件名稱作為關(guān)鍵字强经，通過檢查子FormControl的狀態(tài)計算其狀態(tài)睡陪。若其中的某個控件無效，則整個表單無效匿情。
const form = new FormGroup({
password: new FormControl('', Validators.minLength(2)),
passwordConfirm: new FormControl('', Validators.minLength(2)),
}, passwordMatchValidator);
function passwordMatchValidator(g: FormGroup) {
return g.get('password').value === g.get('passwordConfirm').value
? null : {'mismatch': true};
}
new FormGroup中參數(shù)：第一個參數(shù)是子控件（FormControl）的集合兰迫，每個子控件的key是其注冊的名稱；第二個參數(shù)是組級間的驗證程序炬称，例如汁果，密碼控件和驗證密碼控件驗證相等時的程序就放在第二個參數(shù)上。
-
FormControlclass玲躯，跟蹤單個表單控件的值和有效性狀態(tài)据德。
const name = new FormControl('', Validators.required);
new FormControl中參數(shù)：第一個參數(shù)是初始化的值；第二個參數(shù)是驗證的方法跷车，當(dāng)讓也可以寫多個驗證方法晋控，暫不討論。
-
FormArray姓赤， 跟蹤FormControl赡译、FormGroup、FormArray實例數(shù)組的值和有效性狀態(tài)不铆。
AbstractControl
AbstractControl是FormGroup蝌焚、FormControl、FormArray的基類誓斥，它定義了所有子類之間共享的屬性只洒，如value、dirty和valid劳坑，它不應(yīng)該直接被實例化毕谴。
FormControlName Directive、FormControl Directive
- 相同點：都是將
FormControl實例綁定到表單控件元素。這兩個指令確保以程序?qū)懭氲姆绞綄?code>FormControl的值寫入到DOM元素中去（模型->視圖涝开，Model->View）,其二也確保用戶輸入到DOM的值反應(yīng)到FormControl的實例中循帐。（視圖->模型，View->Model）舀武。 - 不同點：FormControlName一般和FormGroup嵌套使用拄养。
different.png
FormContorName綁定的是單個表單控件中key，而FormControl綁定的是FormControl實例银舱。
以上就是我對Angular Form知識點的一些筆記瘪匿，請大家多多指教。寻馏。棋弥。
