title: Angular Material editable table using FormArray
body: <p>I'm trying to build an inline editable table using the latest material+cdk for angular. </p>
  
  <h1>Question</h1>
  
  <blockquote>
    <p>How can I make mat-table use <code>[formGroupName]</code> so that the form fields can be referenced by its correct form path?</p>
  </blockquote>
  
  <p>This is what I got so far: <strong><a href="https://stackblitz.com/edit/angular-material-editable-table?file=src%2Fapp%2Fapp.component.ts" rel="noreferrer">Complete StackBlitz example</a></strong></p>
  
  <p><strong>Template</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form [formGroup]="form"&gt;
    &lt;h1&gt;Works&lt;/h1&gt;
    &lt;div formArrayName="dates" *ngFor="let date of rows.controls; let i = index;"&gt;
      &lt;div [formGroupName]="i"&gt;
        &lt;input type="date" formControlName="from" placeholder="From date"&gt;
        &lt;input type="date" formControlName="to" placeholder="To date"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;h1&gt;Wont work&lt;/h1&gt;
    &lt;table mat-table [dataSource]="dataSource" formArrayName="dates"&gt;
      &lt;!-- Row definitions --&gt;
      &lt;tr mat-header-row *matHeaderRowDef="displayColumns"&gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef="let row; let i = index; columns: displayColumns;" [formGroupName]="i"&gt;&lt;/tr&gt;
  
      &lt;!-- Column definitions --&gt;
      &lt;ng-container matColumnDef="from"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; From &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let row"&gt; 
          &lt;input type="date" formControlName="from" placeholder="From date"&gt;
        &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="to"&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; To &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let row"&gt;
          &lt;input type="date" formControlName="to" placeholder="To date"&gt;
        &lt;/td&gt;
      &lt;/ng-container&gt;
    &lt;/table&gt;
    &lt;button type="button" (click)="addRow()"&gt;Add row&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre class="lang-ts prettyprint-override"><code>export class AppComponent implements  OnInit  {
    data: TableData[] = [ { from: new Date(), to: new Date() } ];
    dataSource = new BehaviorSubject&lt;AbstractControl[]&gt;([]);
    displayColumns = ['from', 'to'];
    rows: FormArray = this.fb.array([]);
    form: FormGroup = this.fb.group({ 'dates': this.rows });
  
    constructor(private fb: FormBuilder) { }
  
    ngOnInit() {
      this.data.forEach((d: TableData) =&gt; this.addRow(d, false));
      this.updateView();
    }
  
    emptyTable() {
      while (this.rows.length !== 0) {
        this.rows.removeAt(0);
      }
    }
  
    addRow(d?: TableData, noUpdate?: boolean) {
      const row = this.fb.group({
        'from'   : [d &amp;&amp; d.from ? d.from : null, []],
        'to'     : [d &amp;&amp; d.to   ? d.to   : null, []]
      });
      this.rows.push(row);
      if (!noUpdate) { this.updateView(); }
    }
  
    updateView() {
      this.dataSource.next(this.rows.controls);
    }
  }
  </code></pre>
  
  <h1>Problem</h1>
  
  <p>This wont work. Console yields </p>
  
  <blockquote>
    <p>ERROR Error: Cannot find control with path: 'dates -> from'</p>
  </blockquote>
  
  <p>It seems as if the <code>[formGroupName]="i"</code> has no effect, cause the path should be <code>dates -&gt; 0 -&gt; from</code> when using a formArray.</p>
  
  <p><strong>My current workaround</strong>: For this problem, I've bypassed the internal path lookup (<code>formControlName="from"</code>) and use the form control directly: <code>[formControl]="row.get('from')"</code>, but <strong>I would like to know</strong> how I can (or at least why I cannot) use the Reactive Form preferred way. </p>
  
  <p>Any tips are welcome. Thank you.</p>
  
  <hr>
  
  <p>Since I think this is a bug, I've registered <a href="https://github.com/angular/material2/issues/12217" rel="noreferrer">an issue</a> with the angular/material2 github repo.</p>