Angular performs unnecessary async validaton and throws ExpressionChangedAfterItHasBeenCheckedError

Question

I'm building my own form creator in angular 6.1. I've made reproduction code - here it is: https://stackblitz.com/edit/angular-svpkpx?file=src%2Fapp%2Fapp.component.html

As in example. When You add some dynamically created fields angular performs async validation on field that is intact. It also throws ExpressionChangedAfterItHasBeenCheckedError when those fields are in ngFor loop.

When there is no ngFor loop there is non ExpressionChangedAfterItHasBeenCheckedError

score 0 · Answer 1 · answered Aug 07 '18 at 10:09

0

Well it will start working as expected if you simply move flag toggle method to component code insteed of doing it in template and force change detection run.

view:

  <button type="button" (click)="toggleShow()">show/hide</button>

component:

constructor(private cdr:ChangeDetectorRef){

}
  toggleShow(){
    this.show=!this.show;
    this.cdr.detectChanges();
  }

https://stackblitz.com/edit/angular-jnmqud?file=src/app/app.component.ts

answered Aug 07 '18 at 10:09

Antoniossss

31,590
6
57
99

This solution works, but better would be to use a solution inside `input-wrapper` – piernik Aug 07 '18 at 10:55
I didn't notice you have custom component there. – Antoniossss Aug 07 '18 at 11:06

score 0 · Accepted Answer · answered Aug 08 '18 at 06:20

0

@kara from angular team found real issue: https://github.com/angular/angular/issues/25350#issuecomment-411226248

I was using formGroup as @Input and since it's an angular directive droved to problems.

answered Aug 08 '18 at 06:20

piernik

3,507
3
42
84

Angular performs unnecessary async validaton and throws ExpressionChangedAfterItHasBeenCheckedError

2 Answers2