Angular updates validity of existing FormArray elements when new element is added

Question

And I don't want this. Because I'm validating each element of FormArray asynchronously, I want validators only to run when necessary (i.e. when value of the control they're added to really changes). I also find this behaviour strange because validators don't get executed when value of FormArray changes, only when new element is added.

replication: https://stackblitz.com/edit/angular-reactive-forms-tkdu1n?file=app%2Fapp.component.ts

Any help would be greatly appreciated

Guerric P · Accepted Answer · 2020-06-25 07:57:50Z

1

+100

It appears that FormArray executes the validator for every nested FormControl when a new FormControl is pushed inside it, and there's nothing to do about it...

So I forked your stackblitz and I created a stateful validator with a closure, and it did the trick:

form: FormArray;

ngOnInit() {
  this.form = new FormArray([]);
  this.form.push(new FormControl("test", null, this.validatorFactory()));
}

addControl() {
  this.form.push(new FormControl(null, null, this.validatorFactory()));
}

validatorFactory() {
  let previousValue;
  return (c: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
    if (c.value == previousValue) {
      return Observable.of(null);
    } else {
      previousValue = c.value;
      return Observable.of(null).delay(1000);
    }
  };
}

Forked Stackblitz

Hope this helps!

edited Jun 25, 2020 at 7:57

answered Jul 6, 2018 at 15:09

Guerric P

32k6 gold badges61 silver badges109 bronze badges

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

Comments

user4799206 · Accepted Answer · 2018-07-03 12:41:58Z

0

Yes, just change the

return Observable.of(null).delay(1000);

to

return Observable.of(null).delay(0);

When you make delay 1000ms you also disable and block the reachability of the statuses of the other instances ( or values), however, when you make delay 0, it does not deal with other instances just checks the current one.

Hope it helps!

answered Jul 3, 2018 at 12:41

user4799206

3 Comments

displayName Over a year ago

I cannot set the delay when using real services instead of mocked ones...

displayName Over a year ago

It's still calling validators for each of the controls obviously, just the delay is gone.

user4799206 Over a year ago

Of course, you cant get away from this because you use single validator for them, but in view it does not act like that when you eliminate the delay. If you want to avoid from it you should use new instance of FormArray for each value which of course is terrible idea. Best way I think is doing the validation yourself instead of using FormArray.

Collectives™ on Stack Overflow

Angular updates validity of existing FormArray elements when new element is added

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related