Angular - Working on Form arrays with Mat table

Question

I am facing an issue with form arrays applied on mat-table. where I am not able to make my mat-cells editable.

Something there was an issue when passing array objects to [datasource] directly. But i believe it should be instantiate as new MatTableDataSource.

    <mat-table #table [dataSource]="c.value.contacts" FormArrayName="contacts" >

But in my case it was different, i am getting complete collection of data directly from API and I am using Form arrays to loop the each collection and bind on to mat-table. So I could not find the way to instantiate matdatasource in this case.

I have created stackblitz for this, but here it works perfectly without any issue. https://stackblitz.com/edit/angular-riepzk-xygeob?file=app%2Ftable-basic-example.html

Please guide me to proceed forward.

Answer 1

We can achieve this by passing "FormArray" controls to the dataSource".

for this please use the following code in the "table-basic-example.ts".

createForm() {
    this.externalPartiesForm = this.fb.group({
      externalParties: this.fb.array([])
    })
}


bindForm() {

    let control = <FormArray>this.externalPartiesForm.get("externalParties");
    this.dataSource.forEach(x => {
        console.log('bind form');
        control.push(this.fb.group({
            id: x.id,
            company: x.companyName,
            contacts: this.fb.array(x.contact.map(i => this.fb.group({
                id: i.id,
                contactName: i.contactName,
                emailId: i.emailId,
                adminAgent: i.adminAgent,
                collateralAgent: i.collateralAgent,
                trusteeAgent: i.trusteeAgent,
            })))
        }))
    });
}

in the dataSource binding please give controls not the values as below.

<mat-table #table [dataSource]='c.get("contacts").controls' formArrayName="contacts" ></mat-table>

The detailed code of "table-basic-example.html" is below.

<form [formGroup]="externalPartiesForm">
    <div formArrayName="externalParties">
        <div *ngFor="let c of externalPartiesForm.get('externalParties').controls; let i = index;">
            <div [formGroupName]="i">
                <mat-divider></mat-divider>
                <br />
                <br />

                &nbsp;&nbsp;<i>Company Name </i> &nbsp; {{c.value.company}}
                <br />
                <br />
                <pre style="color:red;">{{c.get("contacts").value | json}}</pre>

                <div>
                    &nbsp;&nbsp;<i>Contact Details</i>
                    <mat-table #table [dataSource]='c.get("contacts").controls' formArrayName="contacts">

                        <ng-container matColumnDef="contactName">
                            <mat-header-cell *matHeaderCellDef> Contact Name </mat-header-cell>
                            <mat-cell *matCellDef="let element; let i = index;" [formGroupName]="i">
                                {{element.value.contactName}}
                            </mat-cell>
                        </ng-container>

                        <!-- Weight Column -->
                        <ng-container matColumnDef="emailId">
                            <mat-header-cell *matHeaderCellDef> Email Id </mat-header-cell>
                            <mat-cell *matCellDef="let element; let i = index;" [formGroupName]="i">
                                {{element.value.emailId}}

                            </mat-cell>
                        </ng-container>


                        <!-- Complex Column -->
                        <ng-container matColumnDef="adminAgent">
                            <mat-header-cell *matHeaderCellDef> Admin Agent </mat-header-cell>
                            <mat-cell *matCellDef="let element; let i = index;" [formGroupName]="i">
                                <mat-checkbox formControlName="adminAgent"></mat-checkbox>
                            </mat-cell>
                        </ng-container>

                        <ng-container matColumnDef="collateralAgent">
                            <mat-header-cell *matHeaderCellDef> Collateral Agent </mat-header-cell>
                            <mat-cell *matCellDef="let element; let i = index;" [formGroupName]="i">
                                <mat-checkbox formControlName="collateralAgent"></mat-checkbox>
                            </mat-cell>
                        </ng-container>

                        <ng-container matColumnDef="trusteeAgent">
                            <mat-header-cell *matHeaderCellDef> Trustee Agent</mat-header-cell>
                            <mat-cell *matCellDef="let element; let i = index;" [formGroupName]="i">
                                <mat-checkbox formControlName="trusteeAgent"></mat-checkbox>
                            </mat-cell>
                        </ng-container>

                        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
                    </mat-table>
                </div>
            </div>
        </div>
    </div>
</form>

For Reference added an inline screenshot.

And the code in the below url : https://stackblitz.com/edit/angular-riepzk-my4nvn?file=app/table-basic-example.html