title: Reactive Forms : array property being transformed to object
body: <p>The issue can be seen in <a href="https://stackblitz.com/edit/angular-3hsfxf?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer"><strong>this stackblitz</strong></a> : </p>
  
  <p>I have a payload : </p>
  
  <pre class="lang-js prettyprint-override"><code>payload = {
    id: 1,
    name: 'This is the payload',
    children: [
      { id: 1, name: 'Child 1' }
    ],
  };
  </code></pre>
  
  <p>I create a form group out of that : </p>
  
  <pre class="lang-js prettyprint-override"><code>this.form = this.fb.group(this.payload);
  </code></pre>
  
  <p>I then display the value of the form : </p>
  
  <pre class="lang-js prettyprint-override"><code>{{ form?.value | json }}
  </code></pre>
  
  <p>And the result is : </p>
  
  <pre class="lang-json prettyprint-override"><code>{ "id": 1, "name": "This is the payload", "children": { "id": 1, "name": "Child 1" } }
  </code></pre>
  
  <p>As you can see, the <code>children</code> property went from an array, to an object.</p>
  
  <ol>
  <li>How did that happen ? </li>
  <li>Is it possible to stop Angular from doing that ? </li>
  <li>If I need to use a formArray, is there a way to make it automatic ? </li>
  </ol>