title: Angular 2/4 Edit Form Populate FormArray Controls
body: <p>I'm trying to implement an edit form for a model with nested attributes (FormArray). I'm having trouble with the syntax and I'm uncertain whether I'm on the right track.  The attributes for the main form work, it's the nested form I'm having problems with. Here's what I have so far.</p>
  
  <p>Here I initiate the form group:</p>
  
  <pre><code>private initForm() {
    this.subscription = this.expenseService.getExpense(this.id)
      .subscribe(
        expense =&gt; {
          this.expense = expense;
          this.patchForm();
        }
      );
    this.expenseEditForm = this.fb.group({
      date: '',
      amount: '',
      check_number: '',
      debit: '',
      payee_id: '',
      notes: '',
      expense_expense_categories_attributes:[]
    });
  }
  </code></pre>
  
  <p>Here I patch the form to set values from an object retrieved from my backend API.</p>
  
  <pre><code>private patchForm() {
    this.expenseEditForm.setValue({
      date: '',
      amount: this.expense.amount_cents,
      check_number: this.expense.check_number,
      debit: this.expense.debit,
      payee_id: '',
      notes: this.expense.notes,
      expense_expense_categories_attributes:  this.fb.array([
        this.setExpenseCategories(),
      ])
    });
  }
  </code></pre>
  
  <p>This is where I'm stuck.  How do I push onto a FormArray.  If I try to push, I get an error stating that push it doesn't exist on FormArray. </p>
  
  <pre><code>private setExpenseCategories() {
    for ( let expenseCategories of this.expense.expense_expense_categories){
      this.fb.array.push([
         this.fb.group({
          expense_category_id: [expenseCategories.expense_category_id, Validators.required],
          amount: [expenseCategories.amount_cents]
        ])
      });
    }
  }
  </code></pre>
  
  <p>Just in case it's needed. Here's my html.</p>
  
  <pre><code>&lt;div
    *ngFor="let expensecategoriesCtl of expenseEditForm.controls.expense_expense_categories_attributes.controls let i = index"
    [formGroupName]="i"
    style="margin-top: 10px;"&gt;
  
    &lt;md-card&gt;
      &lt;md-select class="full-width-input"
                 placeholder="Expense Category"
                 id="expense_category_id"
                 formControlName="expense_category_id"
      &gt;
  
        &lt;md-option *ngFor="let expenseCategory of expenseCategories" value="{{expenseCategory.id}}"&gt;
          {{expenseCategory.category}}
        &lt;/md-option&gt;
      &lt;/md-select&gt;
  
      &lt;md-input-container class="full-width-input"&gt;
        &lt;input
          mdInput placeholder="Amount"
          type="number"
          formControlName="amount"&gt;
      &lt;/md-input-container&gt;
    &lt;/md-card&gt;
  &lt;/div&gt;
  </code></pre>