Angular 響應式表單之表單分組

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

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 響應式表單之表單分組

Angular 響應式表單之表單分組

Angular 響應式表單之表單分組

angular響應式表單

相關推薦