基于记录数创建表单组

Question

我想根据数据库中的记录数在mat-expand-panel中创建FormGroups/FormArrays。

我有一个组表
ID | 描述
1 |组 1
2 |第 2
组

我有详细的表
ID | 描述 | group_id
1 |详情 1.1 |1
2 |详情 1.2 |1
3 |详情 2.1 |阿拉伯数字

现在，我有了这个代码，它将根据记录数循环

.HTML

<mat-expansion-panel *ngFor="let group of groups"> <!-- based on group table  -->
<form [formGroup]="group.formGroup">
<div formArrayName="group.formArray" > 
<div *ngFor="let detail of details"> <!-- based on detail table -->
</div>
</div>
</form>
</mat-expansion-panel>

TS

????????

我知道如何创建表单组和表单数组，但要根据由垫子扩展面板划分的记录数来执行此操作......这就是我的问题所在。

Answer 1

真的我不知道你想创建什么 formGroup/formArray 之王。我想你想要一个formGroup的formArray，每个formGroup都有formControl"id"，"desc"和一个formArray"detail"。所以我们可以得到类似的东西

[
{
"id": 1,
"desc": "group1",
"detail": [
{
"id": 1,
"desc": "Detail 1.1."
},
{
"id": 2,
"desc": "Detail 1.2."
}
]
},
{
"id": 2,
"desc": "group2",
"detail": [
{
"id": 3,
"desc": "Detail 2.1."
}
]
}
]

来管理 FormGroup 的 FormArrays，它是返回 formGroup 的有用创建函数，例如

createGroup(data:any):FormGroup
{
data=data || {id:null,desc:null,detail:null}
return new FormGroup({
id:new FormControl(data.id),
desc:new FormControl(data.desc),
detail:data.detail && data.detail.length?
new FormArray(data.detail.map(detail=>this.createDetail(detail))):
new FormArray([])
})
}
createDetail(data:any):FormGroup
{
data=data || {id:null,desc:null}
return new FormGroup({
id:new FormControl(data.id),
desc:new FormControl(data.desc),
})
}

好吧，如果我们有一些喜欢

group=[{id:1,desc:"group1"},{id:2,desc:"group2"}]
detail=[{id:1,desc:"Detail 1.1.",group_id:1},
{id:2,desc:"Detail 1.2.",group_id:1},
{id:3,desc:"Detail 2.1.",group_id:2}
]

我们可以在ngOnInit中创建一个formArray。

this.form=new FormArray(this.group.map((x:any)=>{
return this.createGroup({
...x,
detail:this.detail.filter(d=>d.group_id==x.id)
})
}))

看看我们如何创建一个 FormArray 将 this.group 的每个元素转换为 FormGroup。 我们将每个"组"的值和一个新的属性传递给我们的函数，"detail"它是一个数组，groupId 等于 id 的详细信息值

好吧，这是困难的部分。有趣的是放在手风琴中

<form *ngIf="form" [formGroup]="form">
<mat-accordion>
<mat-expansion-panel *ngFor="let grp of form.controls" [formGroup]="grp">
<mat-expansion-panel-header>
<mat-panel-title>
<mat-form-field>
<input matInput formControlName="id">
</mat-form-field>
<mat-form-field>
<input matInput formControlName="desc">
</mat-form-field>
</mat-panel-title>
</mat-expansion-panel-header>
<div formArrayName="detail">
<div *ngFor="let detail of grp.get('detail').controls;let i=index" [formGroupName]="i">
<mat-form-field>
<input matInput formControlName="id">
</mat-form-field>
<mat-form-field>
<input matInput formControlName="desc">
</mat-form-field>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
</form>

看到我们正在使用*ngFor="let grp of form.controls" [formGroup]="grp"的方式来获取 formArray 的组。这是管理FormArray，放置<form [formGroup]="myFormArray">并在myFormArray.controls上循环的方式。

你可以在堆栈闪电战中看到

注意：我也将ids作为可编辑和表单的一部分，而实际上我认为没有必要

注2：在提交中，您需要创建一个映射表单.value 的新详细信息表