如何在Angular中为动态输入字段使用数组形式的formControlName？

要实现你需要的动态输入字段（对应数组形式的表单控件），Angular响应式表单中的FormArray就是专门处理这类场景的方案，具体实现步骤如下：

1. 组件类配置表单结构 #

在组件的.ts文件中，创建包含FormArray的FormGroup，并实现添加字段的方法：

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

@Component({
  selector: 'app-dynamic-fields',
  templateUrl: './dynamic-fields.component.html',
  styleUrls: ['./dynamic-fields.component.css']
})
export class DynamicFieldsComponent {
  dynamicForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单，包含名为fields的FormArray，默认先添加一个空控件
    this.dynamicForm = this.fb.group({
      fields: this.fb.array([this.fb.control('')])
    });
  }

  // 便捷获取FormArray的方法
  get fieldsArray(): FormArray {
    return this.dynamicForm.get('fields') as FormArray;
  }

  // 添加新输入字段
  addField(): void {
    this.fieldsArray.push(this.fb.control(''));
  }

  // 可选：删除指定索引的字段
  removeField(index: number): void {
    this.fieldsArray.removeAt(index);
  }
}

2. 模板绑定动态控件 #

在组件的HTML模板中，循环遍历FormArray的控件，为每个控件绑定表单控制，同时添加添加字段的按钮：

<form [formGroup]="dynamicForm">
  <!-- 循环渲染动态输入字段 -->
  <div formArrayName="fields">
    <div *ngFor="let field of fieldsArray.controls; let i = index">
      <input 
        id="field-{{i}}" 
        matInput 
        [formControlName]="i"
        placeholder="输入内容"
      >
      <!-- 可选：添加删除按钮 -->
      <button type="button" (click)="removeField(i)">删除</button>
    </div>
  </div>

  <!-- 添加新字段的按钮 -->
  <button type="button" (click)="addField()">添加字段</button>
</form>

关键说明 #

• FormArray会自动维护一组FormControl，作用等同于原生HTML中name="field[]"，用于收集数组形式的表单数据。
• 模板中通过formArrayName="fields"指定数组控件的名称，再用*ngFor遍历fieldsArray.controls，每个输入框通过[formControlName]="i"绑定到数组对应的索引位置。
• 提交表单时，dynamicForm.value会返回类似{ fields: ['foo', 'bar', 'baz'] }的结构，和原生表单提交的数组数据格式完全对应。

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