Angular 根据记录数创建表单组

我想根据数据库中的记录数在mat扩展面板内创建FormGroups/FormArray

我有一张团体桌 id | desc 1 |第1组 2 |第2组

我有一张明细表 id | desc |组id 1 |详图1.1 | 1 2 |详图1.2 | 1 3 |详图2.1 | 2

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

HTML

---

我知道如何创建表单组和表单数组，但这样做是基于被mat扩展面板划分的记录数。。。这就是我的问题所在。

我真的不知道你想创建什么样的formGroup/formArray之王。我想您需要一个formGroup的formArray，每个formGroup都有as formControl id、desc和一个formArray细节。这样我们就可以得到

[
  {
    "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，可以使用create函数返回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。我们将每个组的值和一个新的proertie作为数据传递给函数，详细说明它是一个数组，详细说明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>

请注意，我们正在使用form.controls[formGroup]=grp的*ngFor=let grp方法来获取formArray的组。这是在myFormArray.controls上管理FormArray、放置和循环的方式

你可以从中看到

注意：我把ID作为可编辑的，也是表单的一部分，但实际上我认为它不是必需的

---

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

您提供了我所需的内容。非常感谢。你是贝丝[插入迈克·泰森照片]

  this.form=new FormArray(this.group.map((x:any)=>{
    return this.createGroup({
      ...x,
      detail:this.detail.filter(d=>d.group_id==x.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>