Angular执行不必要的异步验证并抛出ExpressionChangedAfterItHaHasBeenCheckedError

Question

我正在用angular 6.1构建自己的表单创建器。 我已经制作了复制代码-这是https://stackblitz.com/edit/angular-svpkpx?file=src%2Fapp%2Fapp.component.html

例如。当您添加一些动态创建的字段时，angular将对完整的字段执行异步验证。当这些字段处于ExpressionChangedAfterItHasBeenCheckedError循环中时，它还会引发ngFor。

没有ngFor循环时就没有ExpressionChangedAfterItHasBeenCheckedError

Answer 1

如果仅将标志切换方法移动到在模板中执行此操作的组件代码并强制执行更改检测，它将按预期开始工作。

视图：

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

组件：

constructor(private cdr:ChangeDetectorRef){

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

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

Answer 2

来自棱角团队的

@kara发现了真正的问题：https://github.com/angular/angular/issues/25350#issuecomment-411226248

我将formGroup用作@Input，因为这是一个导致问题的角度指令。