FormArrayを正しく使用していますか？

Question

だから私は、エラーなしでコンパイルコードを持っていますが、私はエラーを与えています使用している場合、その後...

マイフォームコンポーネント：

export class OrderHeaderComponent implements OnInit { 
    orderForm: FormGroup; 
    orderLines: FormArray; 

    ngOnInit() { 
     // build the form model 
     this.orderLines = this.fb.array([]) 
     this.orderForm = this.fb.group({ 

      orderHeadForm: this.fb.group({ // create nested formgroup to pass to child 
       selectTypeahead: ['', 
            Validators.required], 
       ohReference: ['', 
            Validators.required], 
       }), 

      orderLines: this.orderLines, 

     }) 

    } 

    someFunction(){ 
     this.orderLines.push(this.fb.group({ 
        ['newInputName']: ['', 
            Validators.required], 
        })); 
    } 
} 

は今、これはにフォームを渡す親コンポーネントであり、さまざまな子供たち（これは私が現在取り組んでいるformArray部分を除いて動作します）。それぞれの子は、次のようになります。 parent_template：

<form [formGroup]="orderForm" (ngSubmit)="orderFormSubmit()"> 
    <childTemplate [orderHeadForm]="orderForm.controls.orderHeadForm"> 
    </childTemplatet> 
</form> 

子供テンプレート：

<div class="form-group" [formGroup]="orderHeadForm"> 
     <label for="oh-custaccount">Customer Account #</label> 

    <input class="form-control" type="text" 
    formControlName="selectTypeahead" 
    (focusout)=lookupCustomerAccountReactive() /> 

    <p *ngIf="orderHeadForm.controls.selectTypeahead.errors?.required" 
    style="color:red;">Number required!</p> 
</div> 

子コンポーネント：この時点で今

export class CustomerSelect implements OnInit { 

    @Input() orderHeadForm: FormGroup; 

.... 
} 

、私も新しいレンダリングしようとしていないのですformArrayから入力フォームを作成すると、エラーなしで作成したいので、後でテンプレートを作成できます。

how to access the index value of formarray of angular, when nested formControls are placed in a separate component?

しかし、私、私は次の場合に

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '{ 
"orderHeadForm": { 
    "selectTypeahead": "", 
    "ohReference": "" 
}, 
"orderLines": [] 
}'. Current value: '{ 
"orderHeadForm": { 
    "selectTypeahead": "", 
    "ohReference": "" 
}, 
"orderLines": [ 
    { 
    "newInputName": "" 
    } 
] 
}' 

は今、私はこのスレッドを見てきました。しかし、現在、私のアプリは、（）注文ラインアレイに新しい項目を追加するとすぐに、私はsomeFunctionを呼び出すとクラッシュします30子コンポーネントがすべてこれを必要としていると言うことがあります。おそらく、フォームのセットアップ/構築に何か問題があります。私は間違って/フォームの配列を間違って使用していますか？ドキュメントに記載されている修正についての言及はなく、私のユースケースはユニークです。

Answer 1

何らかの理由で、関数someFunctionを実行しているときに変更検出に問題があります。あなたが共有するリンクごとに、各子供に手動の変更の検出を追加する必要があるかどうかは疑問でした。しかし、この場合は必要ありません。どうして？

@ reputは、@Inputが設定されてもエラーがスローされないということです。それは正常に動作し、エラーをスローしません。親が関数someFunctionを呼び出すと、エラーが発生します。これは、変更検出に関する問題がその時点で発生していることを示しています。行後に手動で変更の検出をトリガすることによって

：

this.orderLines.push(this.fb.group({ 
    ['newInputName']: ['', Validators.required], 
})); 

は、したがって、それぞれの子の変化の検出をトリガするために必要十分ではなくなるはずです。コードは次のようになります。

import {ChangeDetectorRef} from '@angular/core' 

constructor(private ref: ChangeDetectorRef) { } 

someFunction(){ 
    this.orderLines.push(this.fb.group({ 
    ['newInputName']: ['', Validators.required], 
    })); 
    this.ref.detectChanges(); 
}