Angular中带预填充数组值的动态响应式表单实现问询

看起来你已经搭好了表单的基础框架！我来帮你补全剩余代码，实现从JSON数据预填充表单，同时添加动态增删组织/区域的功能，让表单完全适配你的需求。

1. 补全buildRegion方法 #

首先咱们把缺失的buildRegion方法写完，假设你的区域对象包含regionName和regionCode两个属性（你可以根据实际JSON结构调整字段）：

buildRegion(regionData?: any): FormGroup {
  // 支持传入区域数据进行预填充，没有数据则初始化空值
  return this.fb.group({
    regionName: new FormControl(regionData?.regionName || ''),
    regionCode: new FormControl(regionData?.regionCode || '')
  });
}

2. 从JSON数据初始化表单 #

接下来实现从你的组织机构JSON数据预填充整个表单的方法。假设你的JSON数据结构是这样的：

{
  "organizations": [
    {
      "organizationTitle": "总部",
      "regions": [
        { "regionName": "华东区", "regionCode": "EC" },
        { "regionName": "华北区", "regionCode": "NC" }
      ]
    },
    {
      "organizationTitle": "分公司",
      "regions": [
        { "regionName": "华南区", "regionCode": "SC" }
      ]
    }
  ]
}

在组件里添加初始化方法：

// 获取表单数组的便捷 getter
get organizations(): FormArray {
  return this.editForm.get('organizations') as FormArray;
}

// 从JSON数据初始化表单
initFormFromJson(jsonData: any): void {
  // 先清空现有表单数组
  this.organizations.clear();
  
  // 遍历每个组织机构，构建表单组
  jsonData.organizations.forEach((org: any) => {
    const orgGroup = this.buildOrganization(org.organizationTitle);
    const regionsArray = orgGroup.get('regions') as FormArray;
    
    // 遍历当前组织的区域，构建区域表单组
    org.regions.forEach((region: any) => {
      regionsArray.push(this.buildRegion(region));
    });
    
    this.organizations.push(orgGroup);
  });
}

3. 添加动态增删操作方法 #

为了让表单支持动态添加/删除组织和区域，补充以下方法：

// 添加新的组织机构
addOrganization(): void {
  this.organizations.push(this.buildOrganization(''));
}

// 删除指定索引的组织机构
removeOrganization(index: number): void {
  this.organizations.removeAt(index);
}

// 获取指定组织的区域表单数组
getRegions(orgIndex: number): FormArray {
  return this.organizations.at(orgIndex).get('regions') as FormArray;
}

// 为指定组织添加新区域
addRegion(orgIndex: number): void {
  this.getRegions(orgIndex).push(this.buildRegion());
}

// 删除指定组织的指定区域
removeRegion(orgIndex: number, regionIndex: number): void {
  this.getRegions(orgIndex).removeAt(regionIndex);
}

4. 完整组件类示例 #

把这些整合起来，你的组件类大概是这样的：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'app-org-form',
  templateUrl: './org-form.component.html',
  styleUrls: ['./org-form.component.css']
})
export class OrgFormComponent implements OnInit {
  editForm!: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.createForm();
    // 假设你从服务或本地获取了JSON数据，这里模拟一下
    const mockJsonData = {
      "organizations": [
        {
          "organizationTitle": "总部",
          "regions": [
            { "regionName": "华东区", "regionCode": "EC" },
            { "regionName": "华北区", "regionCode": "NC" }
          ]
        }
      ]
    };
    // 初始化表单数据
    this.initFormFromJson(mockJsonData);
  }

  createForm() {
    this.editForm = this.fb.group({
      organizations: this.fb.array([this.buildOrganization('')])
    });
  }

  buildOrganization(name: string): FormGroup {
    return new FormGroup({
      organizationTitle: new FormControl(name),
      regions: this.fb.array([this.buildRegion()])
    });
  }

  buildRegion(regionData?: any): FormGroup {
    return this.fb.group({
      regionName: new FormControl(regionData?.regionName || ''),
      regionCode: new FormControl(regionData?.regionCode || '')
    });
  }

  get organizations(): FormArray {
    return this.editForm.get('organizations') as FormArray;
  }

  initFormFromJson(jsonData: any): void {
    this.organizations.clear();
    jsonData.organizations.forEach((org: any) => {
      const orgGroup = this.buildOrganization(org.organizationTitle);
      const regionsArray = orgGroup.get('regions') as FormArray;
      org.regions.forEach((region: any) => {
        regionsArray.push(this.buildRegion(region));
      });
      this.organizations.push(orgGroup);
    });
  }

  addOrganization(): void {
    this.organizations.push(this.buildOrganization(''));
  }

  removeOrganization(index: number): void {
    this.organizations.removeAt(index);
  }

  getRegions(orgIndex: number): FormArray {
    return this.organizations.at(orgIndex).get('regions') as FormArray;
  }

  addRegion(orgIndex: number): void {
    this.getRegions(orgIndex).push(this.buildRegion());
  }

  removeRegion(orgIndex: number, regionIndex: number): void {
    this.getRegions(orgIndex).removeAt(regionIndex);
  }
}

5. 模板示例（HTML部分） #

最后是对应的模板，用来渲染动态表单：

<form [formGroup]="editForm">
  <div formArrayName="organizations">
    <h3>组织机构列表</h3>
    <!-- 遍历每个组织机构 -->
    <div *ngFor="let org of organizations.controls; let orgIndex = index" [formGroupName]="orgIndex">
      <div class="org-group">
        <input type="text" formControlName="organizationTitle" placeholder="组织机构名称">
        <button (click)="removeOrganization(orgIndex)" *ngIf="organizations.length > 1">删除组织</button>
        
        <!-- 遍历当前组织的区域 -->
        <div formArrayName="regions" class="regions-group">
          <h4>区域列表</h4>
          <div *ngFor="let region of getRegions(orgIndex).controls; let regionIndex = index" [formGroupName]="regionIndex">
            <input type="text" formControlName="regionName" placeholder="区域名称">
            <input type="text" formControlName="regionCode" placeholder="区域编码">
            <button (click)="removeRegion(orgIndex, regionIndex)" *ngIf="getRegions(orgIndex).length > 1">删除区域</button>
          </div>
          <button (click)="addRegion(orgIndex)">添加区域</button>
        </div>
      </div>
    </div>
    <button (click)="addOrganization()">添加组织机构</button>
  </div>

  <!-- 提交按钮 -->
  <button type="submit" (click)="onSubmit()">提交表单</button>
</form>

这样你的表单就完全支持从JSON预填充数据，并且可以动态增删组织机构和对应的区域了。如果你的JSON字段和示例不同，只需要调整buildRegion和buildOrganization里的表单控件名称即可。

内容的提问来源于stack exchange，提问作者Umair Jameel