formArray 中的动态 formGroup 使用 formBuilder angular 2

Question

我的后端有一个名为 media 的数组，用于存储多个对象。它看起来像这样：

"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 中的对象数量？

任何 help/tips/suggestions 将不胜感激！

更新

在我的 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() 这个更新版本在调用 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()
          })
        })
      )
    })
  }

用当前媒体填充我的表单。它仍然只填充一个对象。

Answer 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
        })        
      )
    })
  })
}

formArray 中的动态 formGroup 使用 formBuilder angular 2

dynamic formGroup within formArray using formBuilder angular 2

arrays

angular2-forms

angular