Angular如何让mat input的floating label固定在输入框左上角？

方案1：单组件单独配置（官方推荐） #

直接在<mat-form-field>标签上添加floatLabel="always"属性即可，这是Angular Material官方提供的原生配置，无需额外修改样式，兼容性最好。
代码示例：

<mat-form-field appearance="outline" floatLabel="always">
  <mat-label>固定标签</mat-label>
  <input matInput placeholder="输入内容">
</mat-form-field>

注：appearance="outline"是为了匹配「标签固定在输入框轮廓左上角」的视觉效果，如果你用的是fill外观可以对应调整。

方案2：全局统一配置 #

如果项目中所有表单字段都需要固定悬浮标签的效果，无需逐个添加属性，可以在根模块/共享模块中注入全局默认配置：

1. 首先从Angular Material导入配置项：

import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';

2. 在模块的providers数组中添加配置：

@NgModule({
  // ...其他模块配置
  providers: [
    {
      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
      useValue: { floatLabel: 'always', appearance: 'outline' }
    }
  ]
})
export class AppModule { }

方案3：CSS强制覆盖（特殊场景备用） #

如果以上原生配置在你的业务场景中不生效，可以用CSS强制固定标签位置：

/* 写在对应组件的样式文件中 */
:host ::ng-deep .mat-form-field-label {
  /* 直接固定为焦点状态的缩放和偏移值 */
  transform: translateY(-1.34375em) scale(0.75) !important;
  color: rgba(0, 0, 0, 0.6) !important;
}

注：如果不需要全局生效，不要把这段样式放到全局样式文件中，避免污染其他组件的表单样式。

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