Question

我有一个formGroup数组，其中每个元素代表一个表单。接下来，我有一个mat表，我想要做的是将每个tr（因此每一行）生成为一种不同的形式，以便表的第i行链接到第i formGroup。因此，在第i行中，每个td元素都包含一个输入，并且此输入应链接到第i formGroup内的formControl。

因此，基本上每一行都是一个表单，可以单独提交（每行也都有一个“提交”按钮）。

我该如何完成？您能给我提供我可以使用的样板吗？

编辑：这是我到目前为止尝试过的操作：https://angular-dpwgzp.stackblitz.io 出现“错误：formControlName必须与父formGroup指令一起使用”。另外，我不知道将标记放置在每行中的位置。

Answer 1

如果我们无法访问代码，这将是非常困难的帮助。

在this stackblitz中，我举了一个简单的例子。看到我们创建了一个类似

的数组

myformArray = new FormArray([
    new FormGroup({
      name: new FormControl("uno"),
      surname: new FormControl("one")
    }),
    new FormGroup({
      name: new FormControl("dos"),
      surname: new FormControl("two")
    }),
    new FormGroup({
      name: new FormControl("tres"),
      surname: new FormControl("three")

    })])

表的数据源是formArray控件。

  dataSource = this.myformArray.controls;

通过这种方式，“ element”是一个FormGroup，因此单元格可以像

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element">
       <input [formControl]="element.get('name')">
       </td>
  </ng-container>

看到我们使用了[formControl]。那是。一个mat表在myformArray.controls上进行迭代，这只是一个FormGroups数组。 FormGroup是此“元素”，因此element.get（'...'）是FormControl。这就是我们可以使用[formControl] = element.get（'...'）

的原因

就像我们写的不是mat-table

<div *ngFor="let element of myformArray.controls">
  <input [formControl]="element.get('name')">
  <input [formControl]="element.get('surname')">
</div>

表格中每一行的formGroup数组

1 个答案: