angular - Nested Mat-Table inline edit - data bind issue

Question

Does anyone know where to find a sample of Nested Mat-Table with inline edit (bind reactive form)? When I try to reder same data structure with divs, it worked. But with mat-table, it doesnt work.

My Form Structure

this.form = this.fb.group({
   makes: this.fb.array([
   {
      name: 'Test Make 1',
      models:this.fb.array([
         { name: 'Test Model 1 of Make 1' }
      ])
   }]),
)

******** This renders fine ********

<form [formGroup]="form">
    <div formArrayName="makes">
        <div *ngFor="let make of makeFormArray.controls; let makeIndex=index">
            <div [formGroupName]="makeIndex">
                parent index {{makeIndex}}
                <input type="text" formControlName="name">
                <div formArrayName="models">
                    <div *ngFor="let model of modelFormArray(makeIndex).controls; let modelIndex=index">
                        <div [formGroupName]="modelIndex">
                            child index {{modelIndex}}
                            <input type="text" formControlName="name">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

****** Second level table doesn't bind data to input **** console. error - Cannot find control with path: 'makes -> models'**

<ng-container [formGroup]="form">
        <table formArrayName="makes" mat-table [dataSource]="makeFormArray.controls">
            <ng-container matColumnDef="expand" >
                <div class="text-column">
                    <th mat-header-cell *matHeaderCellDef></th>
                    <td mat-cell *matCellDef="let row;" (click)="toggleRowExpand(row)">
                        <mat-icon>{{ displayExpandIcon(row) }}</mat-icon>
                    </td>
                </div>
            </ng-container>

            <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef>Make</th>
                <td class="number-column" mat-cell *matCellDef="let row let rowIndex = index" [formGroupName]="rowIndex">
                    <mat-form-field>
                        <input type="text" matInput formControlName="name">
                    </mat-form-field>
                </td>
            </ng-container>
   
            <ng-container matColumnDef="expandedDetails" >
                <td mat-cell *matCellDef="let row; let parentRowIndex = index">
                    <div>
                        <div>
                            <table formArrayName="models" mat-table [dataSource]="modelFormArray(parentRowIndex).controls" >
                                <ng-container matColumnDef="name">
                                    <th mat-header-cell *matHeaderCellDef>Model</th>
                                    <td class="number-column" mat-cell *matCellDef="let row let rowIndex = index" [formGroupName]="rowIndex">
                                        <mat-form-field >
                                            <input type="text" matInput formControlName="name">
                                        </mat-form-field>
                                    </td>
                                </ng-container>

                                <tr mat-header-row *matHeaderRowDef="modelDisplayedColumns"></tr>
                                <tr mat-row *matRowDef="let row; columns: modelDisplayedColumns"></tr>
                            </table>
                        </div>
                    </div>
                </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="['expand'].concat(makeDisplayedColumns)"></tr>
            <tr mat-row *matRowDef="let row; columns: ['expand'].concat(makeDisplayedColumns)"></tr>
            <tr mat-row *matRowDef="let row; columns: ['expandedDetails']"></tr> 
        </table>
    </ng-container>

question from:https://stackoverflow.com/questions/65839083/nested-mat-table-inline-edit-data-bind-issue

Answer 1

I think you have some binding problem in your code.
Sample HTML Binding of Nested mat-table control

<table mat-table #outerSort="matSort" [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8" matSort>
<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column}} </th>
    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</ng-container>

<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
        <div class="example-element-detail" *ngIf="element.addresses?.data.length" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
            <div class="inner-table mat-elevation-z8" *ngIf="expandedElement">
      <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
      </mat-form-field>
      <table #innerTables mat-table #innerSort="matSort" [dataSource]="element.addresses" matSort>
        <ng-container matColumnDef="{{innerColumn}}" *ngFor="let innerColumn of innerDisplayedColumns">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{innerColumn}} </th>
          <td mat-cell *matCellDef="let element"> {{element[innerColumn]}} </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="innerDisplayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: innerDisplayedColumns;"></tr>
      </table>
            </div>
        </div>
    </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;" [class.example-element-row]="element.addresses?.data.length"
 [class.example-expanded-row]="expandedElement === element" (click)="toggleRow(element)">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>

So, you can check a good example of mat-table in stackbliz Link.
It is a good example, please check the code hope it should work for you.Please let me know.