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：检查后表达式已更改。以前的价值：＆＃39; true＆＃39;。当前价值：＆＃39; false＆＃39;。

在这一行：

<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 ___ has changed after it was checked

另外，作为旁注，您是否真的需要将完整的表单传递给其他组件。通常我们只传递组件将处理的嵌套组，如下所示：

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

就像旁注一样！ :)

Answer 2

你正确地做到了。开发模式下的角度执行两个变化检测周期。一个是正常的，第二个是检查所有被调用的函数第一次和第二次返回相同的结果。检查从模板调用以渲染值的所有@Input或函数是否都不会改变值。

例如，此组件将抛出此异常，因为long（）函数始终返回不同的值。

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

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

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

将FormGroup传递给多个组件

2 个答案: