How to fill form array in Angular 2?

Question

Suppose we have a form that can contain an array of values. In this case, Angular provides us with a FormArrayclass.

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

Also we have the opportunity to use NgForm#setValue. This can be used, for example, to fill out a form with some data received from the server.

When I receive new data from the server, I want to fill out a form with this data. For example, my data looks like this:

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

Now it's time to fill out the form with this data. When I try to just call this.form.setValue(data), I get an error message:

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

How to fill out a form with data, but with these requirements:

• I know the shape of the property addresses.
• I do not know the number of addresses in this array data.addresses.