Angular Material：点击按钮切换组禁用输入框并显示Tooltip

1. 组件类定义状态与处理逻辑 #

在你的组件 TypeScript 文件中，添加控制输入框状态的变量和按钮组的事件处理方法：

import { Component } from '@angular/core';
import { MatButtonToggleGroup } from '@angular/material/button-toggle';

@Component({
  // 保留你的组件元数据（如 selector、templateUrl 等）
})
export class YourComponent {
  // 控制输入框的禁用状态
  isInputDisabled = false;
  // 输入框禁用时显示的提示文本
  inputTooltipText = '输入框已禁用，请先取消选中按钮';

  // 处理按钮组的选中状态变化
  handleToggleChange(toggleGroup: MatButtonToggleGroup) {
    // multiple 模式下，toggleGroup.value 是选中值的数组，判断是否有选中项
    this.isInputDisabled = !!toggleGroup.value?.length;
  }

  // 保留原有的搜索方法
  searchBox(value: string) {
    // 你的搜索逻辑实现
  }
}

2. 更新模板代码 #

修改 HTML 模板，实现输入框禁用状态与按钮组的联动，并给输入框添加条件显示的 Tooltip：

<div>
  <mat-form-field>
    <input 
      matInput 
      #filterBox 
      (keyup)="searchBox(filterBox.value)" 
      <!-- 动态绑定输入框的禁用状态 -->
      [disabled]="isInputDisabled"
      <!-- 仅当输入框禁用时显示 Tooltip -->
      [matTooltip]="inputTooltipText"
      [matTooltipDisabled]="!isInputDisabled"
    />
    <mat-label>Filter</mat-label>
  </mat-form-field>
</div>

<mat-button-toggle-group
  #toggleButtons="matButtonToggleGroup"
  <!-- 用 change 事件替代 click，准确捕获选中状态变化 -->
  (change)="handleToggleChange(toggleButtons)"
  multiple
>
  <mat-button-toggle value="TEST1">TEST1</mat-button-toggle>
  <mat-button-toggle value="TEST2">TEST2</mat-button-toggle>
</mat-button-toggle-group>

关键细节说明 #

• 状态联动：通过[disabled]="isInputDisabled"将输入框的禁用状态与组件变量绑定，按钮组选中状态变化时自动更新输入框状态
• Tooltip 条件控制：使用[matTooltipDisabled]="!isInputDisabled"确保只有输入框禁用时才显示提示；[matTooltip]绑定自定义提示文本
• 事件优化：用(change)替代原有的(click)事件，在multiple模式下，点击已选中按钮取消选中时，change事件能准确反映状态变化，避免逻辑错误
• 冗余清理：删除了原模板中mat-form-field上无效的*标记，以及按钮组上不需要的matTooltip

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