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?

yurzui · Accepted Answer · 2017-07-17 14:39:24Z

15

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

edited Jul 17, 2017 at 14:39

yurzui

215k32 gold badges450 silver badges413 bronze badges

answered Jul 17, 2017 at 14:12

Max Koretskyi

106k69 gold badges356 silver badges524 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user1752532 Over a year ago

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

user1752532 Over a year ago

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

Max Koretskyi Over a year ago

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

dotnet-provoke Over a year ago

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

Khan Over a year ago

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

|

João Paulo Paiva · Accepted Answer · 2022-04-19 15:18:54Z

0

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

answered Apr 19, 2022 at 15:18

João Paulo Paiva

2,2071 gold badge12 silver badges5 bronze badges

Collectives™ on Stack Overflow

Set and update validation on form array in reactive forms

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related