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

【问题标题】：nested form component throw ExpressionChangedAfterItHasBeenCheckedError on ng-untouched嵌套表单组件在 ng-untouched 上抛出 ExpressionChangedAfterItHasBeenCheckedError
【发布时间】：2019-07-20 02:47:50
【问题描述】：

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

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

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

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

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

【问题讨论】：

How to manage Angular2 "expression has changed after it was checked" exception when a component property depends on current datetime的可能重复
这是同样的错误，但完全不同的主题（有很多方法可以得到这个错误）

标签： angular

【解决方案1】：

您可以在输入字段(input) 事件上使用来自ChangeDetectorRef 的detectChanges() 修复此错误，如下所示。

HTML

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

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

 constructor(private cd: ChangeDetectorRef) {}

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

StackBlitz Demo.

【讨论】：

谢谢，我不喜欢这个解决方案，这是相当大的形式。我需要以正确的方式将 parentForm 绑定到子组件，我正在寻找正确的方式。
我听说 ControlContainer 可能是不提供 @Input 的解决方案，但我以前从未使用过它，如果有人可以提供帮助，谢谢