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

Question

我在 mat-table 上应用表单数组时遇到问题。我无法使我的 mat-cells 可编辑。

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

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

但在我的情况下有所不同，我直接从 API 获取完整的数据集合，并且我使用 Form 数组循环每个集合并绑定(bind)到 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 绑定(bind)中，请给控件而不是下面的值。

<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