Angular中如何实现复选框互斥（仅可选其一或全不选）

方法一：通过点击事件处理 #

直接在绑定的validateOption方法里编写互斥逻辑，判断当前勾选的复选框，取消另一个的选中状态：

组件类代码：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  filterForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.filterForm = this.fb.group({
      coordinatorFilter: [false],
      employeeFilter: [false]
    });
  }

  validateOption(event: Event) {
    const target = event.target as HTMLInputElement;
    // 仅当当前复选框被勾选时处理互斥
    if (target.checked) {
      const controlName = target.getAttribute('formControlName');
      if (controlName === 'employeeFilter') {
        this.filterForm.get('coordinatorFilter')?.setValue(false);
      } else if (controlName === 'coordinatorFilter') {
        this.filterForm.get('employeeFilter')?.setValue(false);
      }
    }
  }
}

你的HTML代码可以保持不变，因为已经绑定了(click)="validateOption($event)"。

方法二：通过表单值变化监听（推荐） #

这种方式更贴合Angular响应式表单的设计，无需依赖点击事件，自动监听表单值变化并处理互斥：

组件类代码：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  filterForm: FormGroup;
  // 存储上一次表单值，用于判断最新勾选的复选框
  private prevValues: { coordinatorFilter: boolean, employeeFilter: boolean };

  constructor(private fb: FormBuilder) {
    this.filterForm = this.fb.group({
      coordinatorFilter: [false],
      employeeFilter: [false]
    });
    this.prevValues = this.filterForm.value;
  }

  ngOnInit() {
    this.filterForm.valueChanges.subscribe(currentValues => {
      // 当两个复选框同时被勾选时处理
      if (currentValues.coordinatorFilter && currentValues.employeeFilter) {
        // 判断最新勾选的复选框，保留其状态，取消另一个
        if (currentValues.employeeFilter !== this.prevValues.employeeFilter) {
          this.filterForm.get('coordinatorFilter')?.setValue(false, { emitEvent: false });
        } else {
          this.filterForm.get('employeeFilter')?.setValue(false, { emitEvent: false });
        }
      }
      // 更新上一次的表单值记录
      this.prevValues = { ...currentValues };
    });
  }
}

此时可以移除HTML中的(click)="validateOption($event)"，逻辑已通过表单监听实现。

关键说明 #

• { emitEvent: false }用于避免设置值时再次触发valueChanges，防止循环执行逻辑。
• 两种方法都支持“都不勾选”的状态，仅限制同时勾选的情况。

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