跨多个组件传递 FormGroup答案

【问题标题】：Passing FormGroup across multiple components跨多个组件传递 FormGroup
【发布时间】：2017-09-29 07:45:49
【问题描述】：

我在 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>

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

ERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：“真”。当前值：'false'。

在这一行：

<form [formGroup]="orderForm">

有什么建议吗？谢谢。

【问题讨论】：

也许您应该在每个子组件中都有一个表单元素，而不是在表单元素中包装页脚、项目和页眉？删除表格，并在每个自定义订单中放置一个。只是一个疯狂的猜测。不知道有没有用。

标签： angular typescript angular2-forms angular-reactive-forms

【解决方案1】：

正如 Julia 所说，这是正常行为。

实际上是组件中的@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>

就像一个旁注！ :)

【讨论】：

谢谢！我想知道在哪里可以找到 Julia 发布的“开发模式下的 Angular 执行两个变更检测周期”声明的官方来源？我问你是因为她一个月以来一直离线，所以。
找到了！ ApplicationRef#tick 文档 ;) 无论如何，您编写了“在接收 orderForm 的组件中手动触发更改检测”。但这在技术上意味着什么？
这是一篇关于变更检测如何工作的好文章：blog.angular-university.io/…@LppEdd 还有这个：blog.angularindepth.com/…

【解决方案2】：

你做得对。开发模式下的 Angular 执行两个更改检测周期。一个是正常的，第二个是检查所有第一次和第二次调用的函数是否返回相同的结果。检查您的所有 @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++;
  }
}

【讨论】：