Angular嵌套FormGroup控件遍历报错问题求助

错误原因分析 #

1. 控制台错误：Cannot find a differ supporting object '[object Object]'
   你试图用*ngFor遍历FormGroup.controls，但controls是键值对结构的对象（而非数组），NgFor仅支持遍历数组这类可迭代类型，因此触发报错。

2. 前端类型错误：Property 'controls' does not exist on type 'AbstractControl'
   contacts.controls返回的是AbstractControl[]类型数组，TypeScript无法自动推断其中元素是FormGroup，直接访问o.controls会触发类型检查失败。

具体修复步骤 #

步骤1：修正TypeScript类型推断（规范写法） #

在app.component.ts中新增一个getter，明确返回FormGroup数组类型，避免模板里的临时类型断言：

get contactGroups(): FormGroup[] {
  return this.contacts.controls as FormGroup[];
}

步骤2：修改模板结构，正确遍历嵌套FormGroup #

更新app.component.html的contacts遍历部分，核心修改点：

• 给FormArray的子FormGroup绑定formGroupName
• 将FormGroup.controls对象转换为数组后再遍历
• 移除错误的formArrayName="o"（子元素是FormGroup而非FormArray）

修改后的模板代码：

<h3>Contacts</h3>
<hr />
<div class="card" [formGroup]="form">
  <div class="card-header">
    <label>User Contacts</label>
  </div>
  <div class="card-body">
    <button class="btn btn-outline-primary" (click)="addNewContacts()">
      Add New Contact
    </button>
    <hr />
    <!-- 外层FormArray容器 -->
    <div formArrayName="contacts">
      <!-- 使用新增的contactGroups getter，规避类型问题 -->
      <div *ngFor="let o of contactGroups; let i = index" class="mb-4">
        <b>Contact {{ i + 1 }}</b>
        <button
          class="btn btn-outline-danger mx-3 mt-3"
          (click)="removeContact(i)"
        >
          &times;
        </button>
        <hr />
        <!-- 绑定当前索引对应的FormGroup -->
        <div [formGroupName]="i">
          <!-- 将FormGroup.controls转为键值对数组遍历 -->
          <ng-container *ngFor="let [controlName, control] of Object.entries(o.controls)">
            <div class="mb-3">
              <!-- 从blockControls中读取标签和输入类型 -->
              <label>{{ getLabel(controlName) }}</label>
              <input 
                [formControlName]="controlName" 
                [type]="getType(controlName)" 
                class="form-control"
              >
            </div>
          </ng-container>
        </div>
      </div>
    </div>
  </div>
  <div class="card-footer text-center">
    <button (click)="onSave()" class="btn btn-primary">Save</button>
  </div>
</div>

<div class="card mt-2">
  <div class="card-header">Result</div>
  <div class="card-body">
    <code>
      <pre>
                {{ result | json }}
            </pre
      >
    </code>
  </div>
</div>

步骤3：新增辅助方法获取表单配置 #

在app.component.ts中添加方法，从blockControls中读取输入框的标签和类型：

// 根据控件名获取对应的配置项
private getControlConfig(controlName: string): any {
  for (const block of this.blockControls) {
    const config = block.block.find((item: any) => item.name === controlName);
    if (config) return config;
  }
  return null;
}

// 获取控件显示标签
getLabel(controlName: string): string {
  const config = this.getControlConfig(controlName);
  return config ? config.label : '';
}

// 获取输入框类型
getType(controlName: string): string {
  const config = this.getControlConfig(controlName);
  return config ? config.type : 'text';
}

修复效果验证 #

完成修改后：

• 控制台的对象遍历错误消失，*ngFor可正常遍历转换后的控件数组
• TypeScript类型错误消除，contactGroups明确了元素类型为FormGroup
• 点击「Add New Contact」可正常添加新行，输入框能正确绑定对应FormControl，保存按钮可输出完整表单值

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