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'.

是否有办法让子组件将自己添加到FormGroup，并且没有父组件设置FormGroup控件和验证。我们需要在应用程序中以不同的方式和组合重用子组件，因此不希望在子组件之外继续重复FormGroup声明，但这似乎不起作用。< / p>

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

0 个答案: