Add/remove reactive form validators to dynamically created inputs

Question

I have created a form in Angular 4, which allows the user to click an ADD or REMOVE button in the form to add/remove fields to the form. I use ngFor to create the html inputs on screen from an array (enlarged by the add function, or shrunk by the remove function).

In the html template I can add formControlName in the form formControlName="control{{index}}" to ensure each new input has a formcontrol.

But how do I dynamically add and remove validators for these inputs?

Answer 1

can you look at this document https://angular.io/api/forms/AbstractControl#updateValueAndValidity,

for add/remove controls you can use these methods

addControl/removeControl

for value and validators you can use like this

 this.form.controls['test_control'].setValidators([Validators.required])
 this.form.controls['test_control'].updateValueAndValidity()

Answer 2

Source Link

For Angular 11 Use setValidators() and updateValueAndValidity() methods

  setRequired() {
    this.profileForm.controls.firstName.setValidators([Validators.required]);
    this.profileForm.controls.firstName.updateValueAndValidity();
  }

  unsetRequired() {
    this.profileForm.controls.firstName.setValidators(null);
    this.profileForm.controls.firstName.updateValueAndValidity();
  }

Answer 3

Angular 13. It's working for me...

OnInit Func:

ngOnInit() {
    this.form.get('type')?.valueChanges.subscribe((val) => {
      if (val) {
        switch (val) {
          case 1:
            this.removeValidators(['comment', 'id']);
            this.addValidators(['desc', 'options']);
            break;
          case 2:
            this.removeValidators(['desc', 'options', 'comment']);
            this.addValidators(['id']);
            break;
        }
      }
    });
}

Func (Add/Remove Validators):

addValidators(controls : string[]){
    controls.forEach(c => {
        if(['desc','comment'].includes(c)){
            this.form.get(c)?.setValidators([Validators.required,Validators.maxLength(250)]);
        } else {
            this.form.get(c)?.setValidators(Validators.required);
        }
        this.form.get(c)?.updateValueAndValidity();
    });
}

removeValidators(controls : string[]){
    controls.forEach(c => {
        this.form.get(c)?.clearValidators();
        this.form.get(c)?.updateValueAndValidity();
    });
}