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