Angular
如何在 Angular 實作動態表單驗證
2017/12/29 17:57:38
0
865
如何在 Angular 實作動態表單驗證
| 簡介 |
介紹 Angular Model Driven 下 如何實作 動態表單驗證 |
| 作者 |
蘇漢祥 |
前言
Angular 2 Forms 表單驗證上 分 Template-Driven 與 Model-Driven ，但論實作彈性上還是 Model-Driven 大於 Template-Driven
在專案需求較為複雜時建議採用 Model-Driven 才是比較好的選擇。該篇簡單介紹如何在表單資料異動時變動驗證規則。
Import ReactiveFormsModule
app.component.html
app.component.ts - import
app.component.ts - constructor
在 constructor 注入 FormBuilder，並建立與html對應的FormGroup結構，並訂閱 controls[‘check’] valueChanges
app.component.ts - clearForm
清除表單內所有的驗證
app.component.ts - setVailidity
判斷傳入值 並依條件 選擇 Control 加入 Validators.required
*每當control變更驗證條件之後需執行 updateValueAndValidity()
實作畫面
相關文章
