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> 

私は、疑問に思って：この上に

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

ライン：

<form [formGroup]="orderForm">

任意の提案ですか？ありがとう。

Answer 1

これは通常の動作です。

これは、DEVモード中に発生した、実際にライン<form [formGroup]="orderForm">

これを引き起こしているあなたのコンポーネントで@Inputではありません。この問題を回避するには、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

正しく実行しています。角度モードでは、2つの変化検出サイクルが実行されます。 1つは正常で、2つ目は、呼び出されたすべての関数が最初と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++; 
    } 
}