如何使用无限层级嵌套JSON为含formArray的响应式表单高效打补丁

你现在的性能问题核心来自于两次全量遍历JSON（生成空结构+打补丁）+ 多次触发表单内部状态更新，直接采用「单遍递归生成结构同时赋值」的方案即可解决，全程只遍历一次数据源，不需要额外打补丁操作，性能最少提升1倍，嵌套层级越深收益越高。

核心优化逻辑 #

• 取消「生成空结构」「打补丁」两个独立步骤，在递归创建控件实例时直接传入对应节点的初始值，一步完成结构生成和值填充
• 批量生成FormArray的子控件，避免循环调用push()产生的多次内部状态更新开销
• 生成控件时关闭emitEvent，跳过不需要的valueChanges、statusChanges事件触发，进一步减少不必要的计算

实现代码示例 #

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

@Injectable({ providedIn: 'root' })
export class NestedFormFactory {
  constructor(private fb: FormBuilder) {}

  /**
   * 传入从数据库读取的完整嵌套JSON，直接返回已填充值的根FormArray
   * @param sections 数据源数组，即你的formDataSections
   */
  buildSectionsForm(sections: any[]): FormArray {
    return this.fb.array(
      sections.map(section => this.buildSectionGroup(section)),
      { updateOn: 'submit' }
    );
  }

  // 生成单个section对应的FormGroup
  private buildSectionGroup(section: any): FormGroup {
    const controlMap: Record<string, AbstractControl> = {
      index: new FormControl(section.index ?? null),
      sectionName: new FormControl(section.sectionName ?? ''),
    };
    // 存在子层级则递归生成对应的FormArray
    controlMap['subSections'] = section.subSections?.length 
      ? this.fb.array(section.subSections.map(sub => this.buildSubSectionGroup(sub)), { emitEvent: false })
      : this.fb.array([], { emitEvent: false });

    return this.fb.group(controlMap, { emitEvent: false });
  }

  // 生成单个subSection对应的FormGroup
  private buildSubSectionGroup(subSection: any): FormGroup {
    const controlMap: Record<string, AbstractControl> = {
      index: new FormControl(subSection.index ?? null),
      subSectionName: new FormControl(subSection.subSectionName ?? ''),
      contentTypes: new FormControl(subSection.contentTypes ?? []),
    };
    // 存在子层级则递归生成对应的FormArray
    controlMap['sections'] = subSection.sections?.length 
      ? this.fb.array(subSection.sections.map(sec => this.buildSectionGroup(sec)), { emitEvent: false })
      : this.fb.array([], { emitEvent: false });

    return this.fb.group(controlMap, { emitEvent: false });
  }
}

使用方式 #

直接调用工厂方法传入数据源即可，不需要额外执行patchValue/setValue操作，返回的就是完整的嵌套表单实例：

// 从数据库拿到的数据源
const formDataSections = [/* 你的嵌套JSON */];
// 一步生成完整表单
const rootFormArray = this.nestedFormFactory.buildSectionsForm(formDataSections);

内容的提问来源于stack exchange，提问作者Shyam Joshi