角2のフォーム - オブジェクトの配列を含む入れ子になったフォームグループのpatchValueへの方法

Question

アイテムの行を追加/削除するフォームがあります。私のフォームを編集する場合は、非同期呼び出しを実行してデータを取得し、それに応じてフォームコントロールの値をパッチ/設定します。しかし、すべての項目で期待通りに機能しますが、Angular 2のpatchValue関数を使用すると、すべてのオブジェクトではなく、オブジェクトの配列の最初のオブジェクトでのみフォームグループが更新されます。

たとえば、フォームに請求書のように3行の広告申込情報がある場合は、最初の広告申込情報のみが入力されます。誰かが私が間違っていることを教えてもらえますか？ここで

私はこのような配列を持っている場合は、私のコンポーネントの機能

​​3210

である、唯一の最初の要素は「パッチ」で事前に

[ 
{amount: "600", coding: "-Kfxw732pfWUS5rU0TRu", description: "Cameras"}, 
{amount: "600", coding: "-Kfxw732pfWUS5rU0TRu", description: "Lights"} 
] 

感謝を示しています！

Answer 1

これを動作させるためには、実際にフォームグループ配列要素を、既に存在する「line_items」コントロールにプッシュしていました。

populateFormWithRequest(requestId) { 
    this.formPopulationObs = this._checkRequests.getRequest(requestId).subscribe(requestData => { 


     // Iterate through the line items and patch them 
     requestData.line_items.forEach((lineItem, index) => { 

     let lineItemTypes = []; 
     if(lineItem.line_item_types) { 
      lineItemTypes = lineItem.line_item_types; 
     } 

     // Create the item obj 
     let lineItemObj = { 
      description: lineItem.description, 
      coding: lineItem.coding, 
      amount: lineItem.amount, 
      line_item_types: lineItemTypes, 
     } 

     const control = <FormArray>this.createRequestForm.controls['line_items']; 
     control.push(this.initLineItem()); 
     control.at(index).patchValue(lineItemObj); 
     }); 
    }) 
} 

Answer 2

同じ結果が、少し簡単に - 空のアイテムを作成し、それを上書きせずに：ここに私の更新機能である

populateFormWithRequest(requestId) { 
 
    this.formPopulationObs = this._checkRequests.getRequest(requestId).subscribe(requestData => { 
 
    this.createRequestForm["line_items"] = 
 

 
requestData.line_items.forEach(itm=>(<FormArray>this.createRequestForm["line_items"]).push(this.createRequestForm.group(itm))); 
 

 
)); 
 
}); 
 
}