Angular 2+响应式表单：点击按钮动态添加/移除字段需求咨询

嘿，我来帮你搞定Angular响应式表单里动态添加/移除select字段的需求！这在响应式表单里是个很常见的场景，用FormArray就能轻松实现，我给你一步步拆解具体怎么做：

要动态管理一组同类型的表单控件，Angular的FormArray就是专门干这个的——它允许你在表单中灵活添加、移除任意数量的FormControl（或者嵌套的FormGroup），完美匹配你的点击+/-按钮动态增减字段的需求。

首先在你的组件里初始化表单，用FormBuilder创建包含FormArray的表单组，同时封装添加、移除控件的方法：

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

@Component({
  selector: 'app-dynamic-selects',
  templateUrl: './dynamic-selects.component.html',
  styleUrls: ['./dynamic-selects.component.css']
})
export class DynamicSelectsComponent {
  dynamicForm: FormGroup;
  // 这里是你的select选项列表，可根据实际业务修改
  selectOptions = [
    { value: 'option1', label: '选项1' },
    { value: 'option2', label: '选项2' },
    { value: 'option3', label: '选项3' }
  ];

  constructor(private fb: FormBuilder) {
    // 初始化表单，默认先添加一个select控件
    this.dynamicForm = this.fb.group({
      selects: this.fb.array([this.createSelectControl()])
    });
  }

  // 定义一个getter，方便模板快速访问FormArray
  get selectsArray(): FormArray {
    return this.dynamicForm.get('selects') as FormArray;
  }

  // 创建单个select对应的FormControl
  private createSelectControl() {
    return this.fb.control(''); // 初始值为空，你也可以设置默认选中值
  }

  // 点击+按钮时添加新的select字段
  addSelectField() {
    this.selectsArray.push(this.createSelectControl());
  }

  // 点击-按钮时移除对应索引的select字段
  removeSelectField(index: number) {
    // 可选：至少保留一个字段，避免全部删光的情况
    if (this.selectsArray.length > 1) {
      this.selectsArray.removeAt(index);
    }
  }
}

接下来写组件的HTML模板，遍历FormArray渲染所有select控件，同时绑定+/-按钮的点击事件：

<form [formGroup]="dynamicForm">
  <!-- 绑定FormArray的名称 -->
  <div formArrayName="selects">
    <!-- 遍历FormArray中的每一个控件，获取索引值 -->
    <div *ngFor="let selectCtrl of selectsArray.controls; let i = index">
      <select [formControl]="selectCtrl">
        <option value="">请选择</option>
        <option *ngFor="let option of selectOptions" [value]="option.value">
          {{ option.label }}
        </option>
      </select>
      <!-- 移除按钮，当只剩最后一个时禁用 -->
      <button type="button" 
              (click)="removeSelectField(i)" 
              [disabled]="selectsArray.length === 1">
        -
      </button>
    </div>
  </div>
  <!-- 添加按钮 -->
  <button type="button" (click)="addSelectField()">+</button>
</form>

<!-- 可选：添加表单值预览，方便调试 -->
<pre class="debug-preview">{{ dynamicForm.value | json }}</pre>

• FormArray的访问：通过getter方法selectsArray简化模板中对FormArray的访问，避免重复写this.dynamicForm.get('selects') as FormArray。
• 控件复用：createSelectControl方法封装了单个select控件的创建逻辑，后续添加新控件时直接调用即可，保证所有控件结构一致。
• 移除逻辑的边界处理：给移除按钮加了disabled判断，确保至少保留一个字段，你也可以根据需求去掉这个限制。
• 表单值的获取：最终所有select字段的值会存放在dynamicForm.value.selects数组里，比如["option1", "option3"]，方便你提交时获取数据。

内容的提问来源于stack exchange，提问作者Murilo Góes de Almeida