###### 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?](https://stackoverflow.com/questions/38797414/in-angular-how-to-add-validator-to-formcontrol-after-control-is-created)
+ [Dynamically Add/Remove Validators in Angular Reactive Forms](https://gouravkajal.medium.com/dynamically-add-remove-validators-in-angular-reactive-forms-2f99c12c285a)