Angular FormArray多记录场景复选框与文本框联动实现问题

核心逻辑很简单：FormArray 中每一行都是独立的 FormGroup 实例，创建行实例时直接给当前行的复选框控件绑定值变更订阅，回调内只操作同组的输入框控件，天然实现行级隔离，不会出现跨行干扰的问题。

1. 修改组件类代码 #

1.1 引入依赖、加订阅清理容器 #

首先引入需要的rxjs类和生命周期接口，组件内加数组存储所有行的订阅实例，避免内存泄漏：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormService } from './form.service';
import {
  FormArray,
  FormBuilder,
  FormControl,
  FormGroup,
  Validators,
} from '@angular/forms';
import { Injectable } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
@Injectable({
  providedIn: 'root',
})
export class AppComponent implements OnInit, OnDestroy {
  form: FormGroup;
  orders = [];
  formSubmitAttempt: boolean;
  ddlRecords: any[] = [];
  ddlTariff: any[] = [];
  // 存储所有行的订阅实例
  private rowValueSubs: Subscription[] = [];

  formMultiple: FormGroup = this.formBuilder.group({
    ddlRecords: [],
    items: this.formBuilder.array([]),
  });

  constructor(
    private formBuilder: FormBuilder,
    private formService: FormService
  ) {}

1.2 改造单条记录FormGroup创建方法 #

创建每一行的FormGroup时，直接给当前行的isDeRe复选框加值变更监听，回调内只操作当前组的exNo控件：

private createEmptyFormGroupItem(id: number = 0): FormGroup {
  // 先创建当前行的表单组
  const rowGroup = this.formBuilder.group({
    Id: id,
    title: new FormControl('', [Validators.required]),
    ddlTariff: new FormControl(this.ddlTariff[0]?.id || null, [Validators.required]),
    exNo: new FormControl(''),
    isDeRe: new FormControl(false), // 复选框默认值用布尔false，不要空字符串避免类型不匹配
  });

  // 绑定当前行复选框的联动逻辑，闭包持有当前行group的引用，不会串到其他行
  const checkSub = rowGroup.get('isDeRe').valueChanges.subscribe(isChecked => {
    const exNoControl = rowGroup.get('exNo');
    if (isChecked) {
      exNoControl.setValue(''); // 清空输入框值
      exNoControl.disable(); // 禁用输入框
    } else {
      exNoControl.enable(); // 启用输入框
    }
  });
  this.rowValueSubs.push(checkSub);

  return rowGroup;
}

1.3 加生命周期销毁逻辑，清理订阅 #

ngOnDestroy(): void {
  // 组件销毁时取消所有行的订阅，防止内存泄漏
  this.rowValueSubs.forEach(sub => sub.unsubscribe());
}

1.4 修改提交方法，兼容禁用控件值获取 #

Angular响应式表单默认disabled状态的控件值不会包含在value属性中，提交时调用getRawValue()即可拿到包含禁用控件在内的完整表单值：

submit() {
  const submitData = this.formMultiple.getRawValue();
  console.log('提交的完整记录列表：', submitData.items);
  // 后续接口提交逻辑直接用submitData即可
}

2. 模板无需修改 #

你现有的模板代码不需要做任何调整，所有联动逻辑都在表单模型层处理，不需要在模板上额外绑定change事件，逻辑更易维护。

实现原理说明 #

FormArray中的每一项都是独立的FormGroup实例，创建行时绑定的订阅通过闭包持有当前行的表单组引用，不管你动态新增、删除多少行，每一行的联动逻辑都只作用于当前行的控件，完全不会出现跨行干扰的问题，每行的exNo、isDeRe字段值都是独立存储的，满足批量提交的需求。

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