每一行在mat-table中的formGroup数组 [英] Array of formGroup within mat-table for each row

问题描述

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

I have an array of formGroup, where each element represents a form. Next I have a mat table, where what I want to do is to generate each tr (so each row) as a distinct form, so that the i-th row of the table is linked to the i-th formGroup. So inside the i-th row, each td element contains an input, and this input should be linked to a formControl which is inside the i-th formGroup.

因此，基本上每一行都是一个表单，可以单独提交(每行也都有一个提交"按钮).

So basically each row is a form, which can be submitted individually (each row also has a "Submit" button).

我该怎么做?您能给我提供我可以使用的样板吗?

How can I accomplish this? Can you provide me a boiler plate I can work on?

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

here's what I tried so far: https://angular-dpwgzp.stackblitz.io where I get "Error: formControlName must be used with a parent formGroup directive." Also, I have no Idea about where to put the tag in each row.

推荐答案

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

It's difficult help if we can't get access to the code.

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

In this stackblitz I put a simple example. See that we create a form Array like

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控件.

The dataSource of the table is the formArray controls.

  dataSource = this.myformArray.controls;

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

In this way, "element" is a FormGroup, so a cell can be like

  <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('...')

See that we use [formControl]. That's. A mat-table iterate over myformArray.controls, that is only an array of FormGroups. The FormGroup is this "element", so element.get('...') is a FormControl. It's the reason we can use [formControl]=element.get('...')

就像我们写的不是mat-table

it's like we write not mat-table

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

这篇关于每一行在mat-table中的formGroup数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！