響應式表單

2021-09-01 00:01:10 字數 1597 閱讀 9343

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的表單差不多,都是在模板中進行資料繫結,驗證等,而響應式表單是功能更強大,靈活的表單...