How do I populate a form array in Angular 2?
<p>Suppose we have a form that can contain an array of values.
For this case Angular provides us with <a href="https://angular.io/docs/ts/latest/api/forms/index/FormArray-class.html" rel="noreferrer"><code>FormArray</code></a> class.</p>

<pre><code>this.form = new FormGroup({
  addresses: new FormArray([]),
})
</code></pre>

<p>Also we have an ability to use <a href="https://angular.io/docs/ts/latest/api/forms/index/NgForm-directive.html#!#setValue-anchor" rel="noreferrer"><code>NgForm#setValue</code></a>. This can be used i.e. to populate the form with some data retrieved from server.</p>

<p>When I receive new data from the server, I want to populate the form with that data. For example, my data looks like this:</p>

<pre><code>const data = {
  addresses: [
    { country: 'USA', city: 'New York' },
    { country: 'Germany', city: 'Berlin' },
  ]
}
</code></pre>

<p>Now it's time to populate the form with this data.
When I try to simply invoke <code>this.form.setValue(data)</code> I get an error:</p>

<pre><code>Cannot set property stack of [object Object] which has only a getter
</code></pre>

<p>How do I populate the form with data, but with these requirements:</p>

<ol>
<li>I know the shape of <code>addresses</code> property.</li>
<li>I don't know the quantity of addresses in that <code>data.addresses</code> array.</li>
</ol>