将FormGroup传递给多个组件

Question

我在一个有角度的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>

我想知道,如果这是一个正确的方法因为我看到这个代码的警告/错误:

错误:ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后发生了变化.上一个值:'true'.当前值:'false'.

在这一行:

<form [formGroup]="orderForm">

有什么建议？谢谢.

Answer 1

正如朱莉娅所说,这是正常行为.

它实际上是@Input你的组件中导致这一点,而不是线<form [formGroup]="orderForm">

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

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

@Input() orderForm: FormGroup

constructor(private ref: ChangeDetectorRef) { }

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

在此处查看有关您的错误的更多信息:Expression ___在检查后已更改

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

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

就像一个旁注!:)