Question

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

我有一个分组表
id | desc
1 |第1组
2 |第2组

我有详细信息表
id | desc | 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的FormArray，创建返回一个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上循环的方式。

您可以在stackblitz

中看到

注意：当我真的认为它不是必需的时候，我也把ids设置为可编辑的一部分，

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

根据记录数创建表单组

1 个答案: