Angular FormArray中复选框的条件联动与状态控制

<form [formGroup]="myForm">
  <div formArrayName="permissionForm">
    <div *ngFor="let subModule of permissionFormArray.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" id="view_{{i}}" />
      <input type="checkbox" formControlName="add" id="add_{{i}}" />
      <input type="checkbox" formControlName="edit" id="edit_{{i}}" />
      <input type="checkbox" formControlName="delete" id="delete_{{i}}" />
    </div>
  </div>
</form>

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-permission-config',
  templateUrl: './permission-config.component.html',
  styleUrls: ['./permission-config.component.css']
})
export class PermissionConfigComponent implements OnInit, OnDestroy {
  myForm: FormGroup;
  private subscriptions: Subscription[] = [];

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      permissionForm: this.fb.array([]) // 假设 'permissionForm' 是 FormArray 的名称
    });
  }

  ngOnInit(): void {
    // 示例：初始化 FormArray，添加一些权限组
    this.addPermissionGroup({
      moduleGroupName: '用户管理',
      subModules: '用户列表',
      view: false,
      add: false,
      edit: false,
      delete: false
    });
    this.addPermissionGroup({
      moduleGroupName: '商品管理',
      subModules: '商品详情',
      view: false,
      add: false,
      edit: false,
      delete: false
    });

    // 为 FormArray 中已有的每个 Form Group 订阅值变化
    this.permissionFormArray.controls.forEach((control, index) => {
      this.subscribeToPermissionGroupChanges(index);
    });
  }

  ngOnDestroy(): void {
    this.subscriptions.forEach(sub => sub.unsubscribe());
  }

  // 获取 permissionForm FormArray 的便捷方法
  get permissionFormArray(): FormArray {
    return this.myForm.get('permissionForm') as FormArray;
  }

  // 添加一个新的权限组到 FormArray
  addPermissionGroup(data: any): void {
    const newGroup = this.fb.group({
      moduleGroupName: [data.moduleGroupName],
      subModules: [data.subModules],
      view: [data.view],
      add: [data.add],
      edit: [data.edit],
      delete: [data.delete]
    });
    this.permissionFormArray.push(newGroup);
    // 为新添加的 Form Group 订阅值变化
    this.subscribeToPermissionGroupChanges(this.permissionFormArray.length - 1);
  }

  // 订阅指定索引的权限组的值变化
  private subscribeToPermissionGroupChanges(index: number): void {
    const currentGroup = this.permissionFormArray.at(index) as FormGroup;

    // 订阅整个 Form Group 的值变化，以便统一处理联动逻辑
    const sub = currentGroup.valueChanges.subscribe(groupValue => {
      const addChecked = groupValue.add;
      const editChecked = groupValue.edit;
      const deleteChecked = groupValue.delete;
      const viewControl = currentGroup.get('view') as FormControl;

      // 检查 'add', 'edit', 'delete' 是否都已选中
      if (addChecked && editChecked && deleteChecked) {
        // 如果 'view' 未选中或未禁用，则进行更新
        if (!viewControl.value || !viewControl.disabled) {
          viewControl.setValue(true, { emitEvent: false }); // 设置为选中，不触发再次变化事件
          viewControl.disable(); // 禁用 'view' 复选框
        }
      } else {
        // 如果条件不满足，且 'view' 当前是被本逻辑禁用和选中的
        if (viewControl.disabled) {
          viewControl.enable(); // 启用 'view' 复选框
          // 如果之前是被本逻辑强制选中的，则取消选中
          if (viewControl.value) {
            viewControl.setValue(false, { emitEvent: false });
          }
        }
      }
    });
    this.subscriptions.push(sub);
  }

  // 示例：移除一个权限组
  removePermissionGroup(index: number): void {
    this.permissionFormArray.removeAt(index);
    // 注意：如果移除的组有订阅，需要手动取消，但在此示例中，我们一次性在 ngOnDestroy 取消所有。
    // 更精细的控制可以在移除时找到对应的 subscription 并取消。
  }
}