Angular 響應式表單之表單分組

2021-09-12 16:54:37 字數 1739 閱讀 9924

表單提交,表單全部校驗成功才能提交,當表單校驗錯誤,表單邊框變紅,同時有錯誤提示資訊,有重置功能

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 可以然我們對表單內容進行分組,方便我們在語義上區分不同型別的輸入,本例中,位址細分為「省」、「市」、「區」。

this.formgroup = this.fb.group()

});

address 此時不是 fromcontrol 而是 formgroup。

省:

} 市:

} 區:}

在獲取 省市區的 formcontrol 時,可以通過這樣獲取

// 太複雜了

this.formgroup.controls['address'].controls['province'];

// 同樣複雜

this.formgroup.get('address').controls['province'];

// 還好

this.formgroup.get(['address', 'province']);

第三種方式雖然簡單,但是不夠完美,get方法不能一步到位,必須同時傳入 formgroupname 和 formcontrolname。因此在檢視單個表單是否有錯誤資訊時,必須先判斷 formcontrolname 是子元件還是孫子元件。

errormessage(formcontrolname: string): string  else 

return ((control.touched || control.dirty) && control.invalid) ? control.errors.message : '';

}

contains方法:檢查組內是否有乙個具有指定名字的已啟用的控制項,存在返回 true,不存在返回 false。

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