Set and update validation on form array in reactive forms

Question

In angular 4 i am creating a form that has a form array like so

this.formBuilder.group({
  name: ['', [Validators.required, Validators.minLength(3)]],
  required:false,
  selectType: ['', [Validators.required]],
  items: this.formBuilder.array([this.buildItems()])
})

...
buildItems() {
  return this.formBuilder.group({ 
     name: ['', [Validators.required]] 
});

This builds the form and i can i add remove etc from this form and items in the form. What i am now trying to achieve is that when the selectType is equal to custom ( which is set as a radio button value on the form ) then i need to change the validation of the items name and clear its validation requirement.

I have done an set and update on a another form like so

  changeValidation() {
      if(condition){
          this.form.get('name').setValidators(Validators.required);
          this.form.get('name').updateValueAndValidity();
      }
  }

Which works fine, however i am not sure how to update the validations on the form array. I have tried

this.items.clearValidators();
this.items.updateValueAndValidity();

I dont get any errors but it also doesn't work. Which kind of makes sense because i am not targeting a specific FormControl however how do i specify a specific FormControl when the FormControls are an array?

Flaunty

Answer 1

how do i specify a specific FormControl when the FormControls are an array?

You have to use at method described here to get a single control:

this.items.at(0).clearValidators();

If you want to clear validators for the name control, do like that:

 this.items.at(0).controls.name.clearValidators();

If you want to remove validators for every control, it seems that form array doesn't provide such API. You have to iterate over the form array controls and remove validators for each control:

this.items.controls.forEach(c => c.clearValidators());

Mumbletypeg

Will that not update for the formControl at index 0. I want to update the whole form array – Flaunty

I want to clear the validators for name: ['', [Validators.required]] in this.items – Flaunty

then do like that this.items.at(0).controls.name.clearValidators();, I've updated the ansewr – Mumbletypeg

This did not work for me.. I had to run .controls[0].updateValueAndValidity(); for each change made otherwise the validations did not always get updated – Junkman

can you clarify what you mean? maybe create some stackblitz demo? – Mumbletypeg

The thing is, should the control be revalidated because an external condition changed, you'll need to call yourself updateValueAndValidity(). github.com/angular/angular/issues/6824. Old post but its the same in angular 4. I hade to call this method if any validators changed dynamically.. – Junkman

@NetProvoke, what you're saying is that after removing a validator we need to trigger validation manually? – Mumbletypeg

"If we did not apply updateValueAndValidity, the form status will remain as VALID because we only updated the validation rules of each field. We did not trigger any updates." see scotch.io/tutorials/… – Junkman

how to clear validation from formarray in runtime – Feathering

there is no need for looping one can simply do this this.items.at(i).get('control_name').clearValidators(); – Pensive

Answer 2

You can update all your FormArray validators with casting:

$ (this.form.get('name') as FormArray).setValidators([Validators.required]);

$ (this.form.get('name') as FormArray).updateValueAndValidity();

In the same way, you can get FormArray and clear values...

Digestif