根据记录数创建表单组

Question

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

我有群table
编号 |描述
1 |第 1 组
2 |第 2 组

我有详细资料table
编号 |描述 | 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，创建 return 一个 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。我们将每个 "group" 的值作为 "data" 和一个新属性 "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的group。这是管理 FormArray 的方式，放入 <form [formGroup]="myFormArray"> 并循环 myFormArray.controls

您可以在stackblitz

中看到

注意：我把 editable 和 id 的一部分也放在了表格中，但实际上我认为这不是必需的

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

根据记录数创建表单组

Create Form Groups Based on Number of Records

angular

formarray

formgroups