Angular - 使用 Mat 表处理表单数组

Question

我正面临在 mat-table 上应用表单数组的问题。我无法使我的 mat-cells 可编辑。

将数组对象直接传递给 [datasource] 时出现问题。但我相信它应该被实例化为新的 MatTableDataSource。

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

但就我而言，情况有所不同，我直接从 API 获取完整的数据集合，我使用 Form 数组来循环每个集合并绑定到 mat-table。所以在这种情况下我找不到实例化 matdatasource 的方法。

我为此创建了 stackblitz，但在这里它可以完美运行，没有任何问题。 https://stackblitz.com/edit/angular-riepzk-xygeob?file=app%2Ftable-basic-example.html

请指导我继续前进。

Answer 1

我们可以通过将“ FormArray ”控件传递给dataSource来实现这一点。

为此，请在“ 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,
            })))
        }))
    });
}

在dataSource绑定中，请给控件而不是下面的值。

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

“ table-basic-example.html ”的详细代码如下。

<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>

参考添加了内联屏幕截图。

以及以下网址中的代码：https : //stackblitz.com/edit/angular-riepzk-my4nvn? file = app/ table- basic- example.html