angular - Angular Reactive Forms AddControl 在使用 PatchValue 时导致 ExpressionChangedAfterItHasBeenCheckedError

Question

我希望能够使用组件构建一个反应式表单，但不是将其全部设置在单个父组件中。所以我创建了初始值FormGroup并将其传递给组件，然后组件this.form.addControl(this.fb.group({ ... }));将它们的组添加到表单中。

例子

父组件

this.form = this.fb.group({}); // Empty

public ngAfterViewInit() {
  // Throws error after trying to patchValue on the child component
  this.form.get('example').patchValue({
    field1: 'Hello World!'
  });
}

子组件

this.parentFormGroup.addControl(
  'childGroup', 
  this.fb.group({ 
    field1: [
      '', [Validators.required]
    ], 
    etc...
  }
);

这一直有效，直到我尝试并在父组件this.form.get('childGroup').patchValue({ ... })的生命周期钩子中发出请求之后。ngAfterViewInit它不会修补组，而是抛出：

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

有没有办法让子组件将自己添加到 aFormGroup中，而不是让父组件设置FormGroup控件和验证。我们需要在应用程序中以不同的方式和组合重用子组件，因此不想FormGroup在子组件之外不断重复声明，但这似乎不起作用。