title: FormArray inside Angular Material Table
body: <p>Note:
  I succeded doing FormArray inside classic HTML Table, as seen below .
  I want to have a FormArray inside Angular Material table and to populate it with data.
  I tried the same approach as with classic HTML Table, but i was not able to compile it due error <strong>"Could not find column with id 'name''"</strong></p>
  
  <pre><code>&lt;div class="form-group"&gt;
  &lt;form [formGroup]="myForm" role="form"&gt;
    &lt;div formArrayName="formArrList"&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;School&lt;/th&gt;
  
        &lt;/tr&gt;
  
        &lt;tr *ngFor="let list of myForm.get('formArrList').controls;let i = index" [formGroupName]="i"&gt;
          &lt;td&gt;
            &lt;div class="col-sm-6"&gt;
              &lt;input class="form-control" type="text"  formControlName="name"/&gt;
            &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;div class="col-sm-6"&gt;
              &lt;input class="form-control" type="text"  formControlName="school"/&gt;
            &lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <p>I try to have a FormArray inside my Angular Material Table
  Here is  my HTML file</p>
  
  <pre><code>&lt;div&gt;
  &lt;form [formGroup]="myForm" role="form"&gt;
    &lt;ng-container formArrayName="formArrList"&gt;
  
    &lt;mat-table #table [dataSource]="myDataSource"&gt;
      &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
  
  
      &lt;ng-container *ngFor="let detailsItems of myForm.get('formArrList').controls;let i = index" [formGroupName]="i"&gt;
  
  
      &lt;ng-container matColumnDef="name"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt;Name&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; 
  
          &lt;mat-form-field class="" hideRequiredMarker&gt;
        &lt;input matInput formControlName="name" type="text" class="form-control"
               autocomplete="off"
               placeholder="name"&gt;
        &lt;/mat-form-field&gt;
  
        &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
  
  
      &lt;ng-container matColumnDef="school"&gt;
        &lt;mat-header-cell *matHeaderCellDef&gt;School&lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let element"&gt; 
  
         &lt;mat-form-field class="" hideRequiredMarker&gt;
        &lt;input matInput formControlName="school" type="text" class="form-control"
               autocomplete="off"
               placeholder="school"&gt;
        &lt;/mat-form-field&gt;
        &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;/ng-container&gt;
  
  
  
    &lt;/mat-table&gt;
    &lt;/ng-container&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <p>And here is a part of my .TS file</p>
  
  <pre><code>@Component(..)
  export class DemO implements OnInit {
  
   displayedColumns = ['name', 'school'];
    myForm: FormGroup;
  
    formArrList: FormArray;
  
     myDataSource: DataSource;
     dummyData: Element[] = [];
  
  
     ngOnInit(): void {
  
      //init form arrayTree
      this.myForm = this.formBuilder.group({
        'formArrList': new FormArray([])
      });
  
    }
  
      initTreeFormArray(name: string, school: string) {
      return this.formBuilder.group({
        'name': [code_any,],
        'school': [prio,]
      });
    }
  
  
    renderTableOnButtonClick(){
         const control = &lt;FormArray&gt;this.treeForm.controls['formArrList']; 
         control.push(this.initTreeFormArray("DummyName", "DummySchool", element.name));
  
  
  
        this.dummyData.push({name: "DummyName", school: "DummySchool"});
        this.myDataSource = new sDataSource(this.dummyData);
  
  
  }
  </code></pre>