Angular中使用*ngFor实现动态数量输入框及数组值绑定问题

原有代码问题 #

• 两层*ngFor使用同名临时变量d，作用域冲突导致内层循环无法正确识别外层组的上下文
• 所有输入框绑定到同一个model平面对象，不同组的同名字段输入会互相覆盖，无法按组隔离数据
• 输入框name属性重复，违反Angular模板驱动表单的命名规则，会出现值绑定异常
• 数据结构未使用数组，无法实现「每组内容对应数组下标位置存储」的需求

具体实现代码 #

组件逻辑（app.component.ts） #

核心是把数据存储结构改为数组，数组下标和组序号一一对应，新增增删组的方法支持用户自定义数量：

interface FieldConfig {
  placeholder: string;
  name: string;
  modelPropName: string;
}

interface GroupFormValue {
  name: string;
  lastName: string;
  age: string | number;
}

export class AppComponent implements OnInit {
  // 输入字段基础配置
  fieldConfig: FieldConfig[] = [
    { placeholder: 'First name', name: 'name', modelPropName: 'name'},
    { placeholder: 'Last name', name: 'lastName', modelPropName: 'lastName'},
    { placeholder: 'Age', name: 'age', modelPropName: 'age'}
  ];

  // 表单数据数组，每一项对应一组输入的值，初始默认渲染1组
  formGroups: GroupFormValue[] = [
    { name: '', lastName: '', age: '' }
  ];

  ngOnInit(): void {}

  // 新增空白输入组
  addGroup(): void {
    this.formGroups.push({ name: '', lastName: '', age: '' });
  }

  // 删除指定索引的输入组，至少保留1组
  removeGroup(index: number): void {
    if (this.formGroups.length <= 1) return;
    this.formGroups.splice(index, 1);
  }

  submit(): void {
    // formGroups即为按组顺序存储的所有输入数据，可直接提交
    console.log('提交的全量表单数据：', this.formGroups);
  }
}

模板文件（app.component.html） #

区分两层循环的临时变量名，绑定值时通过组索引定位到对应数组项，保证name属性全局唯一，追加增删操作按钮：

<!-- 外层遍历所有输入组，i为当前组的索引 -->
<div class="form-group-wrapper" *ngFor="let group of formGroups; let i = index">
  <div class="group-title">第 {{i + 1}} 组</div>
  <!-- 内层遍历字段配置渲染单个输入框 -->
  <div class="single-input" *ngFor="let field of fieldConfig">
    <input 
      type="text"
      class="form-control"
      [placeholder]="field.placeholder"
      [(ngModel)]="formGroups[i][field.modelPropName]"
      [name]="field.name + '_' + i"
    />
  </div>
  <button 
    type="button"
    class="btn btn-sm btn-outline-danger mt-2"
    *ngIf="formGroups.length > 1"
    (click)="removeGroup(i)"
  >删除本组</button>
</div>

<div class="action-buttons mt-3">
  <button type="button" class="btn btn-primary me-2" (click)="addGroup()">新增一组</button>
  <button type="button" class="btn btn-success" (click)="submit()">提交表单</button>
</div>

实现效果 #

• 所有输入组默认纵向排列，和预期UI一致
• 点击「新增一组」会在现有表单下方追加新的空白输入组，点击对应组的删除按钮可移除不需要的组，完全支持用户自定义组数量
• 所有输入值自动按组存入formGroups数组对应下标位置，不会出现跨组值覆盖的问题，提交时可直接使用该数组，无需额外做数据格式转换
• 输入框name属性拼接了组索引，全局唯一，不会触发Angular表单的绑定异常

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