如何阻止Angular Material只读输入框的标签点击时上浮

问题描述 #

• Angular 12及后续版本中，带有readonly属性的Material输入框，即便处于无法编辑的只读状态，点击时标签仍会上浮
• Angular 11中，同类型的只读输入框点击时标签会保持原位，不会上浮

解决方案 #

方法一：自定义CSS覆盖默认样式 #

通过CSS规则强制只读输入框的标签保持初始位置，阻止点击时的上浮行为。将以下代码添加到全局样式文件（如styles.css）中：

/* 阻止只读mat-form-field的标签点击上浮 */
mat-form-field input[readonly] ~ .mat-form-field-label-wrapper .mat-form-field-label {
  transform: none !important;
}

mat-form-field[readonly].mat-form-field-should-float .mat-form-field-label {
  transform: translateY(0) scale(1) !important;
}

全局样式的优先级足够覆盖Angular Material的默认样式，确保修改生效。

方法二：自定义指令控制标签状态 #

如果需要更灵活的逻辑控制，可以创建自定义指令，监听只读输入框的点击事件，强制关闭标签浮动：

import { Directive, HostListener } from '@angular/core';
import { MatFormField } from '@angular/material/form-field';

@Directive({
  selector: 'mat-form-field[readonly]'
})
export class ReadonlyFormFieldDirective {
  constructor(private formField: MatFormField) {}

  @HostListener('click') onFieldClick() {
    this.formField.shouldLabelFloat = false;
  }
}

在Angular模块中声明该指令后，给目标mat-form-field添加readonly属性即可启用该行为。

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