Question

我正在尝试使用带有表单验证的素数ng p表（涡轮表）创建嵌套表-反应驱动方法。

在这里，我实现了无法编辑/更新文本框或p-inputmast值的代码。

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

我可以使用普通的html标签实现此目的。但是，我需要使用primeng p表对其进行修复。

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输入掩码，但是无法使用原始ng表方法进行编辑。

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

您能帮我吗

感谢您的帮助！

Answer 1

问题在于您正在遍历tableData（这是一个Person [] []）。因此，在您认为自己处于FormGroup上下文中的地方，就不是。

您没有在寻址formGroup（即让appForm.get（'tables'）的表。控件是包含FormGroup的FormArray（针对每个Person））。而且，由于您不熟悉formGroup，因此formControlName没有任何意义。

Angular PrimeNg（p-table）嵌套表-反应驱动表单验证

1 个答案: