formcontrol: 表單中的每乙個item
username: formcontrol = new formcontrol('aaa')
formgroup: 表單資料分組,可以巢狀
formmodel: formgroup = new formgroup()
formarray: 表單同樣資料的集合
1.引入響應式表單依賴
imports: [
reactiveformsmodule
],
2.編寫布局檔案
3.ts檔案繫結資料
formmodel: formgroup = new formgroup(),
emails: new formarray([
new formcontrol('[email protected]'),
new formcontrol('[email protected]')
])});
// formbuilder 簡化,可增加引數新增校驗規則
// constructor(private formbuilder: formbuilder)
// formmodel: formgroup = this.formbuilder.group(),
// emails: this.formbuilder.array([
// ['[email protected]'],
// ['[email protected]']
// ])
// });
// 自定義校驗器
usernamevalidator(control: formcontrol): any ;
} emails: new formarray([
new formcontrol('[email protected]'),
new formcontrol('[email protected]')
])});
addemail()
onsubmit()
狀態字段
touched和untouched // 是否獲取過焦點(可控制錯誤資訊的顯示和不顯示)
對應css類選擇器.ng-touched``.ng-untouched
pristine和dirty // 值有沒有被改變過
對應css類選擇器.ng-pristine``.ng-dirty
pending // 非同步請求中
對應css類選擇器.ng-pending
響應式表單
響應式表單中有三個類,用這幾個類在ts檔案中寫好資料模型,再通過其中的指令把模型和布局檔案關聯上 區分兩種表單 看指令,若是form開頭的指令是響應式表單,若是以ng開頭的指令是模板式表單。且只有模板式表單中可以用模板本地變數 name形式 注意 上圖的指令中以name結尾的指令,在模板中進行屬性繫...
響應式表單示例
兩步 1.在ts 中寫好資料模型。2.在布局檔案中用對應的指令把資料模型與布局中的dom聯絡起來。看 這三個類的作用範圍 formgroup最大,旗下有formcontrol,formarray。formgroup也可以巢狀放formgroup。formarray下可以有formcontrol。總之...
angular響應式表單
在使用ng zorro的表單時,發現他和angular的表單有很大不同,於是就去學習了一下angular的表單。在angular中表單有兩種形式,一種是模板驅動表單,一種是響應式表單,模板驅動表單跟angularjs的表單差不多,都是在模板中進行資料繫結,驗證等,而響應式表單是功能更強大,靈活的表單...