Set and update validation on form array in reactive forms

Admin 1
Viewed 20220

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?

angular-reactive-forms angular
2 Answers

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

user_28332060
Related