如何在Angular的ngFor循环中动态定义formControl名称？

这个错误的核心原因是：你没有正确将模板中的输入控件和响应式表单组里的FormControl实例对应起来，而且缺少了必要的表单组绑定和控件名称指定。

我来一步步帮你修复：

第一步：在组件类中构建动态FormGroup #

首先你需要在组件里根据guidelines.fields的条目，动态创建对应的FormControl并添加到FormGroup中。这样模板里的控件才能找到对应的表单控制实例。

示例组件代码：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  guidelines: any; // 这里假设你已经通过接口或其他方式获取了这个数据
  dynamicForm = new FormGroup({});

  ngOnInit(): void {
    // 遍历fields，为每个字段创建FormControl并加入表单组
    this.guidelines.fields.forEach((field: any) => {
      // 用字段名作为控件的唯一标识，初始值设为field.notes
      this.dynamicForm.addControl(field.field_name, new FormControl(field.notes));
    });
  }
}

第二步：修正模板代码 #

接下来修改你的模板，把表单包裹在绑定了FormGroup的<form>标签里，并用formControlName来关联组件里的FormControl，而不是直接用[formControl]绑定index。

修正后的模板代码：

<form [formGroup]="dynamicForm">
  <div *ngFor="let field of guidelines.fields; let i=index">
    <mat-form-field>
      <input 
        formControlName="{{field.field_name}}" 
        matInput 
        placeholder="{{field.field_name}}"
      >
    </mat-form-field>
  </div>
</form>

关键说明 #

• 必须用<form [formGroup]="dynamicForm">包裹所有动态字段，让Angular明确这是一个响应式表单组的范围。
• formControlName的值要和你在组件中addControl时用的控件名完全一致（这里用了field.field_name，确保每个字段名是唯一的，如果有重复风险，也可以用field_${i}作为控件名）。
• 移除了ngDefaultControl，因为Angular Material的matInput已经原生支持表单控件绑定，不需要这个指令。

这样修改后，每个输入控件都会和FormGroup里对应的FormControl正确关联，就不会再出现"Cannot find control with unspecified name attribute"的错误了。

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