在多个组件中传递FormGroup

我在角度2+应用程序中使用反应形式，并且需要将主FormGroup传递给多个组件，以便表单的不同部分页眉，页脚等可以在单独的组件中进行管理，并由这些不同的组件进行填充。这是我正在做它，此刻：在多个组件中传递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">

有什么建议？谢谢。

来源

2017-05-01 adeelmahmood

也许你应该在每个子组件中都有一个form-element，而不是将footer，items和header包含在form-element中？移除表单，并在每个自定义顺序中添加一个。只是一个疯狂的猜测。我不知道它是否有帮助。 – John

正如朱莉娅所说，这是正常的行为。

它实际上是在你的组件@Input导致此，未行<form [formGroup]="orderForm">

这发生在开发模式。如何解决此问题，是在收到orderForm的组件中手动触发更改检测。更这里

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

@Input() orderForm: FormGroup 

constructor(private ref: ChangeDetectorRef) { } 

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

检查你的错误：由于您使用@Input，您可以使用ngOnChanges生命周期挂钩在其他组件Expression ___ has changed after it was checked

此外，作为一个旁注，你真的需要通过完整的表单到您的其他组件。通常我们只传递组件将要处理的嵌套组，所以像这样：

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

就像一个旁注！ :)

来源

2017-05-02 06:39:14 Alex

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

来源

2017-05-01 22:45:30

在多个组件中传递FormGroup

回答

相关问题