在多個組件中傳遞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

回答

相關問題