2017-07-19 75 views
2

我有一個數組在我的後端調用媒體,存儲幾個對象。它看起來是這樣的:動態formGroup內formArray使用formBuilder角2

"media": [ 
    { 
     "srcId": null; 
     "primary": false, 
     "thumbs": { 
      "default": null 
     }, 
     "type": null, 
     "raw": null 
    } 
] 

我的編輯component.ts用於裝載該數組的形式看起來是這樣的:

media: this._fb.array([ 
    this._fb.group({ 
     srcId: new FormControl(this.existingMedia.srcId), 
     type: new FormControl(this.existingMedia.type), 
     raw: new FormControl(this.existingMedia.raw), 
     primary: new FormControl(this.existingMedia.primary), 
     thumbs: this._fb.group({ 
     default: new FormControl(this.existingMedia.thumb.default) 
     }) 
    }) 
    ]), 

眼下這會從媒體數組加載的第一個對象但不包括可能在陣列中的其他媒體對象。 有沒有辦法讓formArray Media內的formBuilder組動態變爲後端Media Array中的對象數量?

任何幫助/提示/建議將不勝感激!

更新

在我ngOnInit我:

this.currentCard = selectedCurrentCard; 
    for (let medias of this.currentCard.media){ 
    this.existingMedia = medias; 

遍歷我的媒體陣列上的後端和

const control = <FormArray>this.cardForm.controls['media']; 
    control.push(this.initCurerntMedia()); 

與initCurrentMedia()看起來像這樣: UPDATED initCurrentMedia()此更新版本w在ngOnInit()中調用時得到感謝感謝@ AJT_82的幫助

initCurrentMedia() { 
    this.currentCard.media.forEach(media => { 
     const control = <FormArray>this.cardForm.controls['media']; 
     control.push(
     this._fb.group({ 
      srcId: new FormControl(media.srcId), 
      type: new FormControl(media.type), 
      raw: new FormControl(media.raw), 
      primary: new FormControl(media.primary), 
      thumbs: this._fb.group({ 
      default: new FormControl() 
      }) 
     }) 
    ) 
    }) 
    } 

用當前媒體填充我的表單。它仍然只是填充一個對象。

回答

1

我來樣訂做形式

this.myForm = this._fb.group({ 
    media: this._fb.array([]) 
}) 

,然後響應後已提取設定值,所以得到響應後,你可以調用一個方法,讓我們說setForm()

setForm() { 
    this.media.forEach(x => { 
    this.myForm.controls.media.push(
     this._fb.group({ 
     srcId: x.srcId, 
     type: x.type, 
     raw: x.raw, 
     primary: x.primary, 
     thumbs: this._fb.group({ 
      default: x.thumbs.default 
     })   
    ) 
    }) 
    }) 
} 
+0

我在遵循你的邏輯@ AJT_82,但是我得到了一個type屬性的錯誤,該屬性在AbstractControl類型中不存在。 –

+0

well' this.media'應指向響應而不是formarray。似乎你現在正在嘗試迭代formarray?雙重命名確實有點令人困惑,你應該重新命名:) – Alex

+0

你是對的。我得到了這個工作。我不得不添加const控件= this.myForm.controls ['media']; control.push(在此之後,它正在工作。謝謝@ AJT_82 !!! –