跨多个组件传递 FormGroup

Passing FormGroup across multiple components

我在 angular 2+ 应用程序中使用响应式表单,需要将主 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>

我想知道,这是否是一种正确的方法,因为我确实看到 warning/error 包含以下代码:

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

这一行:

<form [formGroup]="orderForm">

有什么建议吗?谢谢

你做得对。 Angular 在开发模式下执行两个更改检测周期。一个是正​​常的,第二个是检查所有调用的函数第一次和第二次 returns 相同的结果。检查从模板调用的所有 @Input 或函数以呈现值是否不改变值。

例如,此组件将抛出此异常,因为 long() 函数总是 return 不同的值。

@Component({
  selector: 'my-app',
  template: `
      {{long()}}
  `,
})
export class App {
  name:string;
  i=0;

  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  long(){
    return this.i++;
  }
}

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

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

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

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

@Input() orderForm: FormGroup

constructor(private ref: ChangeDetectorRef) { }

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

在此处查看有关您的错误的更多信息:

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

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

作为旁注! :)