Angular PrimeNg (p表)嵌套表格-反应式驱动表单验证

Question

我正在尝试使用prime ng p-table (turbo table)和表单验证-反应驱动的方法来创建嵌套表。

在这里，我实现了无法编辑/更新值的代码，无论是textbox还是p-inputmast。

这是stackblitz编辑器的网址：https://stackblitz.com/edit/primeng-tables-tc5kpq

我可以使用普通的html标签来实现这一点。但是，我需要使用primeng p-table来解决这个问题。

app.component.ts

ngOnInit() {
    this.tableData = [
      [
        { name: 'Jack', age: 20 },
        { name: 'Mac', age: 22 },
        { name: 'Lightening', age: 42 },
      ],
      [
        { name: 'Jack1', age: 20 },
        { name: 'Mac2', age: 22 },
        { name: 'Lightening3', age: 42 },
      ]
    ];
    this.initilize();
  }
  initilize(){
    this.appForm = this.fb.group({
      tables: this.fb.array([])
    });

    const ctrlTables = <FormArray> this.appForm.controls.tables;

    this.tableData.forEach(tableObj=>{
      ctrlTables.push(this.initTable(tableObj));
    })
  }

  initTable(table: Array<Person>): any {
    let tempTable = new FormArray([]);
    table.forEach((row, index) => {
      tempTable.push(this.fb.group({
        name: row.name,
        age: new FormControl({ value: row.age, disabled: row.ageEditable }, Validators.compose(
          [Validators.required])),
      }));
    });
    return tempTable;
  }

app.component.html

<div [formGroup]="appForm">
    <div formArrayName="tables" class="flex-container" *ngIf="tableData && tableData.length > 0;else errorContent">

        <div [formGroupName]="tableIndex" *ngFor="let table of appForm.get('tables').controls; let tableIndex = index">
            <div>{{table}} - {{table.value.length}}</div>
            <div *ngIf="table && table.value.length > 0">
                <p-table name="tableIndex]" [columns]="tableHeader" [value]="table.value">
                    <ng-template pTemplate="header" let-columns>
                        <tr>
                            <th class="th-prod-name" colspan="4">
                                <div>Table - {{tableIndex}}</div>
                            </th>
                        </tr>
                        <tr>
                            <th *ngFor="let col of columns; let index=index;">
                                <div class="table-header">
                                    {{col.headerDisplayName}}
                                </div>
                            </th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
                        <tr [formGroupName]="rowIndex">
                            <td>{{rowData.name}}</td>
                            <td>
                                <p-inputMask formControlName="age" mask="?99"></p-inputMask>
                            </td>
                        </tr>
                    </ng-template>
                </p-table>
            </div>
        </div>
    </div>
</div>

我可以用普通表格编辑文本框/p-input掩码，但不能用prime ng表格方法编辑。

这是stackblitz编辑器的网址：https://stackblitz.com/edit/primeng-tables-tc5kpq

你能帮我个忙吗。

感谢您的帮助！

Answer 1

问题是您正在遍历tableData (这是一个人)。因此，您认为自己处于FormGroup上下文中的地方，实际情况并非如此。

您没有对表进行寻址(即，让formGroup of appForm.get(‘.controls’) FormArrays是包含FormGroup的表(针对每个人))。而且，由于您不是在寻址formGroup，因此formControlName没有任何意义。