每行的 mat-table 内的 formGroup 数组

Array of formGroup within mat-table for each row

我有一个 formGroup 数组,其中每个元素代表一个表单。接下来我有一个垫子 table,我想做的是将每个 tr(所以每一行)生成为不同的形式,以便 table 的第 i 行链接到第 i 个形式组。所以在第 i 行内,每个 td 元素都包含一个输入,这个输入应该链接到第 i 个 formGroup 内的 formControl。

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

我怎样才能做到这一点?你能给我一个样板吗?

编辑:这是我目前所做的尝试:https://angular-dpwgzp.stackblitz.io 我在哪里得到 "Error: formControlName must be used with a parent formGroup directive." 此外,我不知道将标签放在每一行的什么位置。

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

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")

    })])

table 的数据源是 formArray 控件。

  dataSource = this.myformArray.controls;

这样,"element"就是一个FormGroup,所以一个cell可以像

  <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,它只是一个 FormGroups 数组。 FormGroup 是这个 "element",所以 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>