angular - 跨多个组件传递 FormGroup

Question

我在 angular 2+ 应用程序中使用响应式(Reactive)表单，需要将主 FormGroup 传递给多个组件，以便表单的不同部分，例如页眉、页脚等可以在单独的组件中管理，并由这些不同的组件填充。这就是我目前的做法:

<div class="container-fluid">
  <form [formGroup]="orderForm">
    <order-header [orderForm]="orderForm"></order-header>
    <order-items [orderForm]="orderForm"></order-items>
    <order-footer [orderForm]="orderForm"></order-footer>
  </form>
</div>

我想知道，这是否是一种正确的方法，因为我确实看到了这段代码的警告/错误:

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

在这一行:

<form [formGroup]="orderForm">

有什么建议吗？谢谢。

Answer 1

正如 Julia 所提到的，这是正常行为。

实际上是@Input在导致此问题的组件中，而不是 <form [formGroup]="orderForm"> 行

这发生在开发模式期间。如何解决这个问题，是在接收 orderForm 的组件中手动触发更改检测。 .由于您使用的是 @Input , 您可以使用 ngOnChanges其他组件中的生命周期 Hook :

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

@Input() orderForm: FormGroup

constructor(private ref: ChangeDetectorRef) { }

ngOnChanges() {
  this.ref.detectChanges()
}

在此处检查有关您的错误的更多信息:Expression ___ has changed after it was checked

此外，作为旁注，您真的需要将完整的表单传递给您的其他组件吗？通常我们只传递组件将处理的嵌套组，所以像这样:

<form [formGroup]="orderForm">
  <order-header [orderForm]="orderForm.controls.myNestedGroupName"></order-header>
</form>

作为旁注! :)