mat-table 中每行的 formGroup 数组

Question

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

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

我怎样才能做到这一点？您能为我提供一个可以使用的样板吗？

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

Answer 1

如果我们无法访问代码，就很难获得帮助。

在这个 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;

这样，“元素”就是一个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-table 迭代 myformArray.controls，这只是 FormGroup 的数组。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>