Angular Reactive Form中点击任意行时始终删除最后一行实现方法

实现全程不需要改动你已经搭好的响应式表单基础结构，只需要调整事件绑定和删除逻辑即可，步骤如下：

• 第一步：在组件类中定义固定删除最后一行的方法
  首先确保你的动态行是存在FormArray实例中，新增一个不依赖行索引的删除方法，永远定位到FormArray的最后一个元素移除，代码示例：

  import { Component } from '@angular/core';
  import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
  
  @Component({
    selector: 'app-dynamic-form',
    templateUrl: './dynamic-form.component.html'
  })
  export class DynamicFormComponent {
    demoForm: FormGroup;
  
    constructor(private fb: FormBuilder) {
      // 初始化带动态行的响应式表单
      this.demoForm = this.fb.group({
        formRows: this.fb.array([
          this.createSingleRow(),
          this.createSingleRow(),
          this.createSingleRow()
        ])
      });
    }
  
    // 模板读取FormArray用的getter
    get formRows() {
      return this.demoForm.get('formRows') as FormArray;
    }
  
    // 生成单行表单结构的公共方法，和你之前的逻辑保持一致即可
    createSingleRow(): FormGroup {
      return this.fb.group({
        content: [''],
        type: ['']
      });
    }
  
    // 核心：永远删除最后一行的方法，不需要接收行索引参数
    removeLastRow(): void {
      const rowList = this.formRows;
      // 边界判断：防止删空后索引越界报错，可根据业务调整最小保留行数
      if (rowList.length <= 1) return;
      // 固定移除最后一个位置的表单控件
      rowList.removeAt(rowList.length - 1);
    }
  }
  

• 第二步：模板中给所有表单行绑定统一点击事件
  遍历FormArray渲染行的时候，给行容器绑定点击事件，不需要传入当前行的index，直接调用上面写的removeLastRow方法即可，代码示例：

  <form [formGroup]="demoForm">
    <div formArrayName="formRows">
      <!-- 遍历渲染所有表单行 -->
      <div
        *ngFor="let row of formRows.controls; let i = index"
        [formGroupName]="i"
        (click)="removeLastRow()"
        class="form-row"
      >
        <!-- 行内表单控件，和你原有逻辑一致 -->
        <input 
          type="text" 
          formControlName="content" 
          placeholder="请输入内容"
          <!-- 如果点击输入框不想触发删除，加这行阻止冒泡 -->
          (click)="$event.stopPropagation()"
        >
        <select 
          formControlName="type"
          <!-- 下拉选择同理，不想触发删除就阻止冒泡 -->
          (click)="$event.stopPropagation()"
        >
          <option value="text">文本</option>
          <option value="num">数字</option>
        </select>
      </div>
    </div>
  </form>
  

• 补充注意点
  • 如果业务允许把所有行删空，只需要把removeLastRow里的边界判断改成if (rowList.length === 0) return即可
  • 后续动态新增的表单行会被*ngFor自动渲染，自动绑定点击事件，不需要额外写事件绑定逻辑
  • 如果行上有其他点击交互，记得给对应的交互元素加$event.stopPropagation()阻止事件冒泡，避免误触发删除

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