Angular实现嵌套数据动态复选框表单的类逻辑配置方案

你的代码无法正常运行由3个直接错误导致：

• 内层循环逻辑错误：直接遍历cluster对象，但复选框数据实际存储在cluster.goals数组中
• 表单未正确初始化：仅声明了FormGroup类型，未实例化，也未给每个复选框生成对应的表单控件
• 控件绑定错误：[formControl]指令需要接收FormControl实例，传入数字类型的goal id会直接报错

组件类（ts）正确实现 #

首先引入表单相关依赖，在组件初始化阶段遍历嵌套数据集，为每个复选框生成独立的FormControl，统一挂载到formGroup下：

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

// 定义数据结构，避免TS类型校验报错
interface Goal {
  id: number;
  name: string;
}
interface DataCluster {
  id: number;
  title: string;
  uuid: string;
  goals: Goal[];
}

@Component({
  selector: 'app-planner',
  templateUrl: './planner.component.html'
})
export class PlannerComponent {
  public formGroup: FormGroup;
  // 替换为你的实际业务数据源，注意原示例中goals字段前漏写逗号，属于语法错误
  dataSet: DataCluster[] = [
    {
      id: 1,
      title: 'lorem ipsum class',
      uuid: 'x-123-v',
      goals: [
        { id: 1, name: 'class one' },
        { id: 2, name: 'class two' }
      ]
    },
    {
      id: 2,
      title: 'more class',
      uuid: '199-c-c',
      goals: [
        { id: 3, name: 'class three' },
        { id: 4, name: 'class four' }
      ]
    }
  ];

  constructor(private fb: FormBuilder) {
    const controls: Record<string, FormControl> = {};
    // 遍历所有嵌套的goal项，生成对应表单控件
    this.dataSet.forEach(cluster => {
      cluster.goals.forEach(goal => {
        // 以全局唯一的goal id作为控件key，默认值为未选中false
        controls[goal.id] = this.fb.control(false);
      });
    });
    this.formGroup = this.fb.group(controls);
  }

  submit() {
    if (this.formGroup.invalid) return;
    // 提取所有选中的goal id：过滤出勾选状态的控件，转换key为数字即可
    const selectedGoals = Object.entries(this.formGroup.value)
      .filter(([_, checked]) => checked)
      .map(([id]) => Number(id));
    
    // 后续提交接口逻辑可直接使用selectedGoals
    console.log('已选中的目标id：', selectedGoals);
  }
}

模板（html）修正 #

修复内层循环路径，改用formControlName绑定formGroup下对应的控件：

<app-form (submitted)="submit()" [formGroup]="formGroup">
  <div class="goal__container" *ngFor="let cluster of dataSet">
    <h5>{{cluster.title}} {{cluster.uuid}}</h5>
    <!-- 修正循环目标为cluster.goals -->
    <div *ngFor="let goal of cluster.goals">
      <label>
        <input
          type="checkbox"
          class="form-control"
          formControlName="{{goal.id}}"
        />
        {{goal.name}}
      </label>
    </div>
  </div>
</app-form>

补充说明：如果你的业务数据中goal id存在跨cluster重复的情况，把控件key改成拼接形式即可，比如${cluster.id}_${goal.id}，模板里对应绑定这个拼接值就行。

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