Angular响应式表单：嵌套FormGroup遍历失败求助

问题根源 #

你犯了两个核心错误：

1. 把test FormGroup的值（value）赋值给了fcTest，但实际上需要绑定的是FormGroup的控件实例，而非值。
2. 模板中用静态方式form.controls.item访问控件，Angular无法识别动态的item变量，导致控件找不到，类型不匹配抛出错误。

修正方案 #

1. 修正TypeScript代码

将fcTest定义为FormGroup类型，并直接引用test FormGroup的实例，而非它的value：

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

// ...

public fcTest!: FormGroup;

public ngOnInit(): void {
  this.buildForm(); // 确保先构建表单再初始化fcTest
  this.fcTest = this.form.get('test') as FormGroup;
}

protected buildForm(): void {
  this.form = this.formBuilder.group({
    allowancesUntil90: [0, [Validators.required]],
    test: this.formBuilder.group({
      1: [false],
      2: [false],
      3: [false],
      4: [false],
      5: [false],
      6: [false]
    })
  });
}

2. 修正模板代码

遍历fcTest的控件集合，动态获取每个子控件，并显示控件名称：

<div *ngFor="let item of fcTest.controls | keyvalue">
  <label>
    <amp-check-box [formControl]="fcTest.get(item.key)"></amp-check-box>
    {{ item.key }}
  </label>
</div>

关键说明 #

• fcTest.controls是FormGroup的控件集合，通过keyvalue管道可以遍历每个控件的键（名称）和值（FormControl实例）。
• fcTest.get(item.key)用于动态获取对应名称的FormControl，确保绑定的是正确的控件实例，解决类型不匹配问题。
• 添加<label>和{{ item.key }}可以将控件名称（数字1-6）显示在复选框旁，满足需求。

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