表單提交,表單全部校驗成功才能提交,當表單校驗錯誤,表單邊框變紅,同時有錯誤提示資訊,有重置功能
git倉庫
在分析**之前,首先明確 formcontrol、formcontrol、formcontrolname、formgroup、formgroup、formgroupname、formarray、formarray、formarrayname 都是什麼意思以及它們的用法。
當使用響應式表單時,formcontrol 類是最基本的構造塊。要註冊單個的表單控制項,在元件中匯入 formcontrol 類,並建立乙個 formcontrol 的新例項,把它儲存在類的某個屬性中。
const control = new formcontrol('', validators.required);
console.log(control.value); // ''
console.log(control.status); // 'invalid'}
在元件類中建立了控制項之後,還要把它和模板中的乙個表單控制項關聯起來,為表單控制項新增 formcontrol 繫結。
name:
formgroup 把每個子 formcontrol 的值聚合進乙個物件,它的 key 是每個控制項的名字。它通過歸集其子控制項的狀態值來計算出自己的狀態。如果組中的任何乙個控制項是無效的,那麼整個組就是無效的。
//等同於
formarray 聚合了陣列中每個表單控制項的值。它會根據其所有子控制項的狀態總結出自己的狀態。如果 fromarray 中的任何乙個控制項是無效的,那麼整個陣列也會變成無效的。
fromgroup 可以然我們對表單內容進行分組,方便我們在語義上區分不同型別的輸入,本例中,位址細分為「省」、「市」、「區」。
address 此時不是 fromcontrol 而是 formgroup。this.formgroup = this.fb.group()
});
在獲取 省市區的 formcontrol 時,可以通過這樣獲取省:
} 市:
} 區:}
第三種方式雖然簡單,但是不夠完美,get方法不能一步到位,必須同時傳入 formgroupname 和 formcontrolname。因此在檢視單個表單是否有錯誤資訊時,必須先判斷 formcontrolname 是子元件還是孫子元件。// 太複雜了
this.formgroup.controls['address'].controls['province'];
// 同樣複雜
this.formgroup.get('address').controls['province'];
// 還好
this.formgroup.get(['address', 'province']);
contains方法:檢查組內是否有乙個具有指定名字的已啟用的控制項,存在返回 true,不存在返回 false。errormessage(formcontrolname: string): string else
return ((control.touched || control.dirty) && control.invalid) ? control.errors.message : '';
}
Angular 響應式表單之表單分組
表單提交,表單全部校驗成功才能提交,當表單校驗錯誤,表單邊框變紅,同時有錯誤提示資訊,有重置功能 git倉庫 在分析 之前,首先明確 formcontrol formcontrol formcontrolname formgroup formgroup formgroupname formarray...
Angular 響應式表單之表單分組
表單提交,表單全部校驗成功才能提交,當表單校驗錯誤,表單邊框變紅,同時有錯誤提示資訊,有重置功能 git倉庫 在分析 之前,首先明確 formcontrol formcontrol formcontrolname formgroup formgroup formgroupname formarray...
angular響應式表單
在使用ng zorro的表單時,發現他和angular的表單有很大不同,於是就去學習了一下angular的表單。在angular中表單有兩種形式,一種是模板驅動表單,一種是響應式表單,模板驅動表單跟angularjs的表單差不多,都是在模板中進行資料繫結,驗證等,而響應式表單是功能更強大,靈活的表單...