每行的 mat-table 中的 formGroup 数组 [英] Array of formGroup within mat-table for each row
问题描述
我有一个 formGroup 数组,其中每个元素代表一个表单.接下来我有一个 mat 表,我想要做的是将每个 tr(所以每一行)生成为一个不同的形式,以便表的第 i 行链接到第 i 个表单组.所以在第 i 行内,每个 td 元素都包含一个输入,并且这个输入应该链接到第 i 个 formGroup 内的 formControl.
所以基本上每一行都是一个表单,可以单独提交(每行还有一个提交"按钮).
我怎样才能做到这一点?你能给我提供一个我可以使用的样板吗?
这是我到目前为止尝试过的:https://angular-dpwgzp.stackblitz.io我得到错误:formControlName 必须与父 formGroup 指令一起使用."另外,我不知道在每一行中放置标签的位置.
如果我们无法访问代码,很难获得帮助.
在这个stackblitz中,我把一个简单的例子.看到我们创建了一个像
这样的表单数组myformArray = new FormArray([新表单组({名称:new FormControl("uno"),姓氏:new FormControl("one")}),新表单组({名称:new FormControl("dos"),姓氏:new FormControl("二")}),新表单组({名称:new FormControl("tres"),姓氏:new FormControl("三")})])
表格的dataSource为formArray控件.
dataSource = this.myformArray.controls;
这样,元素"就是一个FormGroup,所以一个单元格可以像
<th mat-header-cell *matHeaderCellDef>名称</th><td mat-cell *matCellDef="let element"><input [formControl]="element.get('name')"></td></ng-容器>
看到我们使用 [formControl].那是.一个 mat-table 迭代 myformArray.controls,它只是一个 FormGroups 的数组.FormGroup 就是这个元素",所以 element.get('...') 是一个 FormControl.这就是我们可以使用 [formControl]=element.get('...')
的原因就像我们写的不是 mat-table
<input [formControl]="element.get('name')"><input [formControl]="element.get('surname')">
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?
Edit: 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.
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")
})])
The dataSource of the table is the formArray controls.
dataSource = this.myformArray.controls;
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>
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('...')
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屋!