Angular动态表单嵌套过深，如何简化services数组的控件结构？

你当前通过FormArray嵌套FormGroup的方式构建动态表单，导致结构层级过深。执行console.log(this.form)后得到的结构包含多余的0: FormGroup和第二层controls，想要简化为如下目标结构：

- controls
  - services
    - controls
      - My Product

你曾尝试直接将单个控件推入FormArray，但最终结构里的控件只能按索引（如[0]）存储，无法实现自定义键名的需求。

解决方案：把services改为FormGroup而非FormArray #

FormArray是按索引存储控件的数组结构，无法直接用自定义字符串作为键名。要实现你想要的结构，应该将services定义为FormGroup，直接向其中动态添加以服务名为键的控件。

步骤1：初始化表单 #

form = this._formBuilder.group({
  services: this._formBuilder.group({}) // 初始化空的FormGroup
});

步骤2：动态添加服务控件 #

const servicesFormGroup = this.form.get('services') as FormGroup;

for (let service of quotation.services) {
  // 直接向services FormGroup添加控件，键为服务名称
  servicesFormGroup.addControl(
    service.serviceName,
    this._formBuilder.control(false)
  );
}

最终结构验证 #

执行console.log(this.form)后，会得到你预期的结构：

- controls
  - services
    - controls
      - My Product
      - 其他服务名称...

为什么之前的尝试无法生效？ #

• FormArray的设计就是按顺序存储控件，所有推入的控件都会以数字索引作为标识，无法使用自定义字符串键。
• 最初嵌套FormGroup的方式会多一层层级，而直接推单个控件到FormArray只能得到索引化的结构，都不符合你的需求。

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