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?

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());

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...