CODEWITHSUNDEEP
angularangular-reactive-forms
user1752532
user1752532

Reputation:

Set and update validation on form array in reactive forms

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?

Upvotes: 10

Views: 26199

Answers (2)

João Paulo Paiva
João Paulo Paiva

Reputation: 2207

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

Upvotes: 0

Max Koretskyi
Max Koretskyi

Reputation: 105439

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

Upvotes: 15

Related Questions