Angular嵌套对象数组的响应式表单构建求助

组件TS文件完整实现 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, Validators } from '@angular/forms';
// 保留你原有自定义验证器的引入

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  private formBuilder = new FormBuilder();
  // 预定义选项，可根据业务需求调整
  predefinedOptions = [
    { label: '选项1', value: 'option1' },
    { label: '选项2', value: 'option2' },
    { label: 'Custom', value: 'custom' }
  ];
  // 编辑模式初始数据，实际项目可通过@Input传入
  initialData: Array<{type: string, items: Array<any>}> = [];

  form = this.formBuilder.group({
    title: new FormControl('', {
      validators: [
        Validators.required,
        FormValidator.nonWhitespace,
        Validators.maxLength(80),
      ],
    }),
    body: this.formBuilder.array([]),
  });

  ngOnInit(): void {
    // 编辑模式：用初始数据初始化表单
    if (this.initialData.length > 0) {
      this.initialData.forEach(bodyItem => {
        const bodyGroup = this.createBodyItem(bodyItem);
        this.bodyArray.push(bodyGroup);
      });
    } else {
      // 创建模式：默认添加一个空Body项
      if (this.bodyArray.controls.length === 0) {
        this.addBodyItem();
      }
    }
  }

  get bodyArray(): FormArray {
    return this.form.get('body') as FormArray;
  }

  // 创建单个Body项的FormGroup，支持传入初始数据
  createBodyItem(initialBody?: { type: string, items: any[] }): FormGroup {
    const itemsArray = this.formBuilder.array([]);
    
    // 初始化已有item
    if (initialBody?.items) {
      initialBody.items.forEach(item => {
        itemsArray.push(this.createItemFormGroup(item));
      });
    } else {
      // 默认添加一个空item
      itemsArray.push(this.createItemFormGroup());
    }

    return this.formBuilder.group({
      type: new FormControl(initialBody?.type || 'body'),
      items: itemsArray
    });
  }

  // 创建单个Item的FormGroup，支持传入初始数据
  createItemFormGroup(initialItem?: { type: string, id: number, value: string, isCustom: boolean, customValue: string }): FormGroup {
    return this.formBuilder.group({
      type: new FormControl(initialItem?.type || 'text'),
      id: new FormControl(initialItem?.id || Math.floor(Math.random() * 1000)), // 临时生成ID，可按需调整
      value: new FormControl(initialItem?.value || ''),
      isCustom: new FormControl(initialItem?.isCustom || false),
      customValue: new FormControl(initialItem?.customValue || '')
    });
  }

  addBodyItem(): void {
    this.bodyArray.push(this.createBodyItem());
  }

  // 给指定Body项添加新Item
  addItemToBody(bodyIndex: number): void {
    const bodyGroup = this.bodyArray.at(bodyIndex) as FormGroup;
    const itemsArray = bodyGroup.get('items') as FormArray;
    itemsArray.push(this.createItemFormGroup());
  }

  // 处理选择框切换逻辑
  onOptionChange(itemGroup: FormGroup, selectedValue: string): void {
    if (selectedValue === 'custom') {
      itemGroup.patchValue({
        isCustom: true,
        value: 'custom'
      });
    } else {
      itemGroup.patchValue({
        isCustom: false,
        customValue: ''
      });
    }
  }
}

模板文件完整实现 #

<form [formGroup]="form">
  <!-- 标题输入框 -->
  <div>
    <label for="title">标题</label>
    <input id="title" formControlName="title" type="text">
    <!-- 保留你原有验证错误提示逻辑 -->
  </div>

  <!-- Body区域 -->
  <div formArrayName="body">
    <!-- 循环每个Body项 -->
    <div *ngFor="let bodyGroup of bodyArray.controls; let bodyIndex = index" [formGroupName]="bodyIndex">
      <h4>Body 项 {{ bodyIndex + 1 }}</h4>
      <!-- 隐藏type字段，因为固定为'body' -->
      <input type="hidden" formControlName="type">

      <!-- Items区域 -->
      <div formArrayName="items">
        <!-- 循环每个Item -->
        <div *ngFor="let itemGroup of (bodyGroup.get('items') as FormArray).controls; let itemIndex = index" [formGroupName]="itemIndex">
          <div>
            <label>选择选项</label>
            <select formControlName="value" (change)="onOptionChange(itemGroup, $event.target.value)">
              <option *ngFor="let option of predefinedOptions" [value]="option.value">{{ option.label }}</option>
            </select>
          </div>

          <!-- 自定义输入框：仅当isCustom为true时显示 -->
          <div *ngIf="itemGroup.get('isCustom')?.value">
            <label>自定义内容</label>
            <input formControlName="customValue" type="text">
          </div>

          <!-- 删除Item按钮 -->
          <button type="button" (click)="(bodyGroup.get('items') as FormArray).removeAt(itemIndex)" *ngIf="(bodyGroup.get('items') as FormArray).length > 1">删除选项</button>
        </div>

        <!-- 添加新Item按钮 -->
        <button type="button" (click)="addItemToBody(bodyIndex)">添加新选项</button>
      </div>

      <!-- 删除Body项按钮 -->
      <button type="button" (click)="bodyArray.removeAt(bodyIndex)" *ngIf="bodyArray.length > 1">删除Body项</button>
    </div>
  </div>

  <!-- 添加新Body项按钮 -->
  <button type="button" (click)="addBodyItem()">添加新Body项</button>

  <!-- 提交按钮 -->
  <button type="submit" [disabled]="!form.valid">提交</button>
</form>

核心实现说明 #

1. 表单结构与数据结构完全对应：

   • 外层body是FormArray，每个元素对应数据中{type: 'body', items: [...]}的FormGroup
   • 每个Body项内的items也是FormArray，每个元素对应单个Item的FormGroup，覆盖所有字段

2. 兼容创建/编辑模式：

   • 初始化时判断是否有初始数据，编辑模式下循环生成对应表单控件；创建模式下默认添加空Body项

3. 选项切换逻辑：

   • 通过onOptionChange处理选择事件，选中"Custom"时自动设置isCustom为true，非自定义时清空customValue并重置isCustom

4. 动态操作支持：

   • 提供添加/删除Body项、Item项的方法，同时保留至少一个Body/Item的限制（可按需调整）

内容的提问来源于stack exchange，提问作者s.khan