Angular中Mat Input清除图标仅在Hover时显示的实现需求

需求：原本输入框有值就会显示清除图标，现在要调整为仅当输入框有值且鼠标悬停在输入框区域时才显示清除图标，无值或未悬停时隐藏。

问题分析 #

原SCSS的选择器逻辑错误：mat-icon是mat-form-field的后代元素，并非input的直接子元素，所以input:hover > .iconDisplay这个选择器无法触发样式变化。同时需要结合“输入框有值”和“鼠标悬停”两个条件来控制图标显示。

解决方案 #

以下是修正后的代码：

HTML

给mat-form-field添加自定义类，方便CSS精准定位；保留*ngIf="controller.value"确保只有输入框有值时才渲染图标：

<mat-form-field appearance="fill" class="clearable-input-field">
  <mat-label>Clearable input</mat-label>
  <input matInput type="text" [formControlName]="controller">
  <mat-icon matSuffix *ngIf="controller.value" class="iconDisplay" (click)="clearInput()">highlight_off</mat-icon>
</mat-form-field>

SCSS

修正选择器，通过mat-form-field的hover状态控制图标显示：

.iconDisplay {
  visibility: hidden;
}

.clearable-input-field:hover .iconDisplay {
  visibility: visible;
}

TS（无需修改）

清除输入的逻辑保持原代码即可：

export class testComponent {
  @Input() public controller: AbstractControl;

  clearInput() {
    this.controller.setValue(null);
  }
}

效果说明 #

• 输入框无值：图标不会被渲染，完全隐藏
• 输入框有值但未悬停：图标已渲染但保持隐藏状态
• 输入框有值且悬停：图标自动显示，点击可清除输入内容

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