如何在Angular 2中填充表单数组？

Question

假设我们有一个可以包含值数组的表单.对于这种情况,Angular为我们提供了FormArray课程.

this.form = new FormGroup({
  addresses: new FormArray([]),
})

我们也有能力使用NgForm#setValue.这可以用于填充表单,其中包含从服务器检索的一些数据.

当我从服务器接收新数据时,我想用该数据填充表单.例如,我的数据如下所示:

const data = {
  addresses: [
    { country: 'USA', city: 'New York' },
    { country: 'Germany', city: 'Berlin' },
  ]
}

现在是时候用这些数据填充表单了.当我尝试简单地调用时,this.form.setValue(data)我收到一个错误:

Cannot set property stack of [object Object] which has only a getter

如何使用数据填充表单,但具有以下要求:

1. 我知道addresses财产的形状.
2. 我不知道该data.addresses数组中的地址数量.

Answer 1

尝试像下面这样

this.form.setControl('addresses', this.formBuilder.array(this.data.addresses || []));