如何在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 || []));