tags: Angular Reactive Forms

[Angular] Validators：如何動態更新表單驗證器

初始建立表單

首先，定義一個 FormGroup 如下：

form: FormGroup;
this.myForm = this.buildForm();

buildForm() {
  return this.fb.group({
    actNo: ['',[Validators.required]],    // 帳號
    txAmt:['',[Validators.required, Validators.min(1)]],        // 金額
}

setValidators() 設定驗證器

setValidators 可用來設定驗證器，並且會覆蓋掉原本的驗證器：

Set a validator for a control in the FormGroup: 

this.myForm.controls['controlName'].setValidators([Validators.required])

addValidators() 添加驗證器

addValidators() 可用來添加驗證器：

Add a validator for a control in the FormGroup: 

this.myForm.controls['controlName'].addValidators([Validators.required])

clearValidators() 移除驗證器

clearValidators() 會移除所有驗證器：

Remove the validator from the control in the FormGroup: 

this.myForm.controls['controlName'].clearValidators()

updateValueAndValidity() 更新驗證器

一旦 validators 有更動，不論是新增或刪除，都必須再透過 updateValueAndValidity() 指令更新驗證器。

Update the FormGroup once you have run either of the above lines. 

this.myForm.controls['controlName'].updateValueAndValidity()

參考資料

• In Angular, how to add Validator to FormControl after control is created?
• Dynamically Add/Remove Validators in Angular Reactive Forms