Angular Material勾选复选框触发另一复选框显示的实现方案

核心逻辑是绑定BOX1的勾选状态到组件变量，通过*ngIf结构指令控制BOX2的渲染即可，以下是可直接运行的示例：

1. 基础实现（模板驱动表单） #

组件TS代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-checkbox-sample',
  templateUrl: './checkbox-sample.component.html'
})
export class CheckboxSampleComponent {
  // 存储BOX1的勾选状态，默认未勾选
  isBox1Checked = false;
}

模板HTML代码 #

<!-- 双向绑定BOX1的勾选状态到变量 -->
<mat-checkbox [(ngModel)]="isBox1Checked">BOX1</mat-checkbox>
<!-- 仅BOX1勾选时显示BOX2 -->
<mat-checkbox *ngIf="isBox1Checked">BOX2</mat-checkbox>

注意：使用ngModel需要提前在当前模块的imports数组中引入FormsModule。

2. 响应式表单版本实现 #

如果你的项目用的是响应式表单，可改用FormControl绑定：

组件TS代码 #

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-checkbox-sample',
  templateUrl: './checkbox-sample.component.html'
})
export class CheckboxSampleComponent {
  box1Control = new FormControl(false);
}

模板HTML代码 #

<mat-checkbox [formControl]="box1Control">BOX1</mat-checkbox>
<mat-checkbox *ngIf="box1Control.value">BOX2</mat-checkbox>

注意：使用响应式表单需要提前在当前模块的imports数组中引入ReactiveFormsModule。

扩展需求：BOX1取消勾选时清空BOX2选择状态 #

如果需要在隐藏BOX2的同时清空它的勾选状态，可增加change事件处理：

<mat-checkbox [(ngModel)]="isBox1Checked" (change)="handleBox1Change()">BOX1</mat-checkbox>
<mat-checkbox *ngIf="isBox1Checked" [(ngModel)]="isBox2Checked">BOX2</mat-checkbox>

export class CheckboxSampleComponent {
  isBox1Checked = false;
  isBox2Checked = false;

  handleBox1Change() {
    if (!this.isBox1Checked) {
      this.isBox2Checked = false;
    }
  }
}

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