Angular中3个复选框全选时勾选禁用首个复选框UI不更新解决

• Angular响应式表单为模型驱动架构，视图状态完全和FormControl实例绑定，直接修改原生DOM的checked、disabled属性不会同步到表单模型，Angular变更检测执行时会用模型存储的值覆盖手动修改的DOM属性，最终导致UI不更新。
• 模板中循环渲染的复选框使用了固定idview1，会造成页面id重复，document.getElementById永远只能匹配到第一个元素，多权限组场景下逻辑完全失效。
• 组件中单独声明的this.add/this.edit/this.delete属性和FormArray内的控件无绑定关系，存储的布尔值无法对应每一组权限的实际选中状态，判断逻辑本身不成立。

全程通过响应式表单自带的API操作状态，不直接操作DOM，适配多权限组的循环场景。

模板改造 #

移除固定id、冗余的单独事件处理方法，遍历时直接遍历FormArray的控件集合而非值快照：

<div formArrayName="permissionForm">
  <div *ngFor="let subModule of permissionForm.controls; let i = index" [formGroupName]="i">
    <input type="text" readonly formControlName="moduleGroupName" class="input-border-module" style="margin-top: 5px;" />
    <br />

    <label class="col-md-5 text-left">
      <input
        type="text"
        readonly
        formControlName="subModules"
        class="input-border-submodule"
      />
    </label>
    <input type="checkbox" formControlName="view" />
    <input type="checkbox" formControlName="add" (change)="checkViewState(i)"/>
    <input type="checkbox" formControlName="edit" (change)="checkViewState(i)" />
    <input type="checkbox" formControlName="delete" (change)="checkViewState(i)"/>
  </div>
</div>

逻辑代码 #

编写统一的状态检查方法，直接操作对应组的表单控件实例完成值和禁用状态设置：

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

// 传入当前操作的权限组索引，定位对应表单组
checkViewState(groupIndex: number): void {
  const currentPermissionGroup = this.permissionForm.at(groupIndex) as FormGroup;
  // 直接从表单控件读取三个操作权限的实时选中状态
  const isAddChecked = currentPermissionGroup.get('add').value;
  const isEditChecked = currentPermissionGroup.get('edit').value;
  const isDeleteChecked = currentPermissionGroup.get('delete').value;
  const viewControl = currentPermissionGroup.get('view');

  if (isAddChecked && isEditChecked && isDeleteChecked) {
    // 调用表单API设置值、禁用状态，会自动同步UI更新
    viewControl.setValue(true);
    viewControl.disable();
  } else {
    // 三个权限未全选时，恢复view控件的可编辑状态
    viewControl.enable();
    // 若需要三个权限不全选时自动取消view的勾选，放开下行注释即可
    // viewControl.setValue(false);
  }
}

// 表单初始化（尤其是异步拉取权限数据生成FormArray）完成后，遍历所有组执行一次状态检查，避免初始值满足全选条件时状态异常
initPermissionForm(permissionData: any[]): void {
  this.permissionForm = this.fb.array(
    permissionData.map(item => this.fb.group({
      moduleGroupName: [item.moduleGroupName],
      subModules: [item.subModules],
      view: [item.view ?? false],
      add: [item.add ?? false],
      edit: [item.edit ?? false],
      delete: [item.delete ?? false]
    }))
  );
  // 初始化完成后全量检查一次状态
  this.permissionForm.controls.forEach((_, index) => this.checkViewState(index));
}

• 响应式表单的所有状态变更必须通过setValue/patchValue/enable/disable等表单API完成，禁止直接操作DOM，API调用后会自动同步视图、更新表单校验状态。
• 循环渲染的表单元素不要使用固定id，所有操作基于表单实例完成，无需查询DOM。
• 表单控件的实时值直接从FormControl实例获取，不要额外维护一套和控件脱节的独立变量，避免值不一致问题。

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