Question

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

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

将此数组加载到表单中的我的edit-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（）此更新版本在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
        })        
      )
    })
  })
}

使用formBuilder angular 2在formArray中使用动态formGroup

1 个答案: