Angular5中如何在响应式FormGroup的FormArray里禁用表单元素

我来给你分享两种实用的实现方式，都是基于Angular响应式表单的特性来做的，你可以根据自己的开发习惯选择：

方法一：通过change事件手动控制 #

这种方式直接利用你已经写好的checkValue方法，只需要稍作修改就能实现需求。

步骤1：修改模板，传递当前FormGroup #

因为是FormArray，每个项都是独立的FormGroup，所以需要把当前项的FormGroup传给checkValue方法，这样才能找到对应的regions控件：

<!-- 假设你的FormArray循环是这样的，item是当前的FormGroup -->
<div *ngFor="let item of yourFormArray.controls; let i = index" [formGroup]="item">
  <select formControlName="access" (change)="checkValue($event, item)" >
    <option [value]="1">Admin</option>
    <option [value]="2">Customer</option>
  </select>
  <mat-select formControlName="regions" multiple>
    <mat-option *ngFor="let region of regionArray" [value]="region.regionId">{{region.description}}</mat-option>
  </mat-select>
</div>

步骤2：实现checkValue方法 #

在组件类里编写逻辑，根据选中的access值来禁用/启用regions控件：

checkValue(event: Event, formGroup: FormGroup) {
  // 获取选中的access值
  const selectedAccess = (event.target as HTMLSelectElement).value;
  // 获取当前FormGroup里的regions控件
  const regionsControl = formGroup.get('regions');

  if (selectedAccess === '1') {
    // 选择Admin时禁用regions，emitEvent: false避免触发额外的valueChanges
    regionsControl?.disable({ emitEvent: false });
    // 可选：如果需要清空已选的区域，可以加上这句
    regionsControl?.setValue([]);
  } else {
    // 选择Customer时启用regions
    regionsControl?.enable({ emitEvent: false });
  }
}

方法二：利用valueChanges自动监听（更推荐） #

这种方式更贴合Angular响应式表单的设计理念，不需要手动处理DOM事件，而是监听表单控件的值变化自动执行逻辑。

步骤1：初始化时添加监听 #

在组件的ngOnInit方法里，给FormArray中的每个FormGroup的access控件添加值变化监听：

import { FormArray, FormGroup, FormControl } from '@angular/forms';

// 假设你的FormArray定义如下
yourFormArray = new FormArray([
  new FormGroup({
    access: new FormControl(2), // 默认选中Customer
    regions: new FormControl([])
  })
]);

ngOnInit(): void {
  this.setupAccessListeners();
}

// 封装监听逻辑，方便后续动态添加FormArray项时复用
setupAccessListeners(): void {
  this.yourFormArray.controls.forEach(formGroup => {
    const accessControl = formGroup.get('access');
    const regionsControl = formGroup.get('regions');

    // 监听access值的变化
    accessControl?.valueChanges.subscribe(accessValue => {
      // 注意：这里的accessValue类型要和你表单初始化的类型一致，如果是数字就用1，字符串就用'1'
      if (accessValue === 1) {
        regionsControl?.disable({ emitEvent: false });
        regionsControl?.setValue([]); // 可选清空已选区域
      } else {
        regionsControl?.enable({ emitEvent: false });
      }
    });

    // 初始化时如果access已经是Admin，直接禁用regions
    if (accessControl?.value === 1) {
      regionsControl?.disable();
    }
  });
}

步骤2：动态添加FormArray项时的处理 #

如果你的FormArray会动态添加新项，记得在添加时也要给新的FormGroup添加监听：

addNewItem(): void {
  const newFormGroup = new FormGroup({
    access: new FormControl(2),
    regions: new FormControl([])
  });
  this.yourFormArray.push(newFormGroup);
  // 给新项添加监听
  this.setupAccessListeners();
}

注意事项 #

• { emitEvent: false }参数很重要，它可以避免禁用/启用控件时触发额外的valueChanges事件，防止循环触发问题。
• 确保access控件的值类型和判断条件一致，比如如果表单初始化时access是数字类型，判断就用accessValue === 1；如果是字符串类型，就用accessValue === '1'。

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