title: Reactive Forms: Form Builder, Dynamically set array size in the form model
body: <p>I'm having a bit of an issue defining an array in reactive forms model:
  (since reactive froms can't simply accept a model (afaik) and work by it, I need to manually define it):</p>
  
  <p><a href="https://stackblitz.com/edit/angular-k9w64n?file=src/app/app.component.html" rel="nofollow noreferrer"><strong>Stackblitz</strong></a></p>
  
  <p><strong>Object from Backend:</strong></p>
  
  <pre><code>  {
      propOne: 'X',
      propTwo: 'Y',
      propArray: [
        {
          objPropA: 'a',
          objPropB: 'b'
        },
        {
          objPropA: 'c',
          objPropB: 'd'
        },
              {
          objPropA: 'e',
          objPropB: 'f'
        }
      ]
    }
  </code></pre>
  
  <p><strong>Component:</strong></p>
  
  <pre><code> ngOnInit() {
      this.myForm = this.fb.group({
        propOne: '',
        propTwo: '',
        propArray: this.fb.array([this.createItem(), this.createItem(), this.createItem()])
      });
  
      // apply the value to the form
      this.myForm.setValue(this.valueFromBackend);
    }
  
    private createItem(): FormGroup {
      return this.fb.group({
        objPropA: '',
        objPropB: '',
      });
    }
  </code></pre>
  
  <p>I would like to avoid creating a form group for each element i'm expecting (<code>this.createItem() x ElementsCount</code>) when defining the form.</p>
  
  <p><strong>Am I really required to define how many elements i'm expecting in the my array?</strong></p>
  
  <p>Am I doing it wrong ?</p>