每行的 mat-table 中的 formGroup 数组

Posted

技术标签:

【中文标题】每行的 mat-table 中的 formGroup 数组【英文标题】:Array of formGroup within mat-table for each row 【发布时间】:2019-10-27 04:37:03 【问题描述】:

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

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

我怎样才能做到这一点?你能给我一个我可以处理的样板吗?

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

【问题讨论】:

添加示例以说明我的意思 【参考方案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]。那是。一个 mat-table 迭代 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>

【讨论】:

谢谢!很抱歉我忘记将 Stackblitz 公开。两个问题:1)如果 dataSource 是可观察的,我无法使其工作 2)您会将
标签放在每一行的哪里,以便可以单独验证/提交每一行?
为了澄清问题 1),假设我在您的示例中从数据库中获取数据名称/姓氏(类型为“[name:string, surname:string]”)。我将这个数组导入一个 FormArray,用新的 FormGroup(name: new FormControl(name), surname: new FormControl(surname)) 替换每个“name:string, surname:string”,这变成了异步数据源。该页面已显示,但是如果我更改输入,它不会反映在表单控件上。 我喜欢 FormArray。如果您想验证个人行,您可以使用 element.valid,请参阅 stackblitz stackblitz.com/edit/angular-wmfjhh-agbgpg?file=app/…。可以看到没有表单标签。考虑到 formArray 是否存在独立于你有一个表单或者也没有,使用一个经典的 &lt;form&gt;[formControl].- 例如如果您的 .html 是空的,则 formArray 仍然存在 - 您选择如何显示 formArray。好吧,在示例中我们通过代码创建 formArray,通常您创建一个 httpClient.get 并且,inside susbcribe 创建 formArray 和 datasource=formArray.controls

以上是关于每行的 mat-table 中的 formGroup 数组的主要内容,如果未能解决你的问题,请参考以下文章

如何比较来自api的jobId和角度材料中的mat-table

如何使 Mat-Table 中的列值成为超链接 [重复]

mat-table重置mat-sort到初始状态

使Angular mat-table中的行数长于dataSource的长度

具有多个页脚的 mat-table

如何使用angular2中的mat-input来汇总在mat-table列中输入的值