angular - 嵌套表单组件在 ng-untouched 上抛出 ExpressionChangedAfterItHasBeenCheckedError

Question

我正在尝试将子组件设置为parentFromGroupas@Input并且我遇到了著名的错误，

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

我知道这个错误，但在这里我不明白为什么，因为我将值设置为从父级到子级不是相反的。你可以在这里查看

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

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

Answer 1

detectChanges()您可以使用from ChangeDetectorRefon input 字段事件修复此错误(input)，如下所示。

HTML

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

TS

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

 constructor(private cd: ChangeDetectorRef) {}

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

StackBlitz 演示。