根据记录数创建表单组

Question

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

我有一个小组表
编号 |描述
1 |第 1 组
2 |第 2 组

我有明细表
编号 |描述 | group_id
1 |细节 1.1 | 1
2 |细节 1.2 | 1
3 |详情 2.1 | 2

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

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

 ????????

我知道如何创建表单组和表单数组，但它是基于除以 mat-expansion-panel 的记录数...这就是我的问题。

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。我们将每个“组”的值和一个新的属性作为“数据”传递给我们的函数，“详细信息”它是一个数组，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

你可以在stackblitz看到

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

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