mat-table中每行的formGroup数组

Question

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

所以基本上每一行都是一个表单，可以单独提交(每一行也有一个“提交”按钮)。

我如何才能做到这一点呢？你能给我一个我能做的样板吗？

编辑:这是我到目前为止尝试过的：https://angular-dpwgzp.stackblitz.io，在那里我得到了"Error: 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")

    })])

表的dataSource是formArray控件。

  dataSource = this.myformArray.controls;

这样，“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。那就是，一个遍历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>