嵌套表单组件在未触摸ng时抛出ExpressionChangedAfterItHaHasBeenCheckedError

Question

我试图将parentFromGroup设置为子组件@Input，但出现了著名的错误，

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-untouched: true'. Current value: 'ng-untouched: false'.

我知道这个错误，但是在这里我不明白为什么，因为我将父级到子级的值设置成反比。 您可以检查它here

如果单击“添加文章”按钮，然后尝试写入已添加的字段，则角度会引发错误。

实现我在这里尝试的最佳方法是什么？

Answer 1

您可以使用detectChanges()中的ChangeDetectorRef对输入的(input)事件进行纠正，如下所示。

HTML

<input placeholder="designation" (input)="onInputChange()" formControlName="designation">

TS

import { ChangeDetectorRef } from '@angular/core';

 constructor(private cd: ChangeDetectorRef) {}

  onInputChange() {
    this.cd.detectChanges();
  }

StackBlitz Demo。