Angular表单中MatInput标签输入时未上浮与输入内容重叠问题

常见原因及对应解决方法 #

• 版本不兼容
  Angular Material 大版本必须和 Angular 核心框架大版本完全匹配，比如 Angular 15 要对应 @angular/material 15.x。你可以在项目根目录执行 ng version 查看两者版本，不一致时升级/降级到同一大版本即可。
• 自定义样式覆盖内置规则
  很多全局自定义的 input、label 样式会覆盖 Material 的浮动逻辑，你可以按以下步骤排查：
  1. 打开浏览器开发者工具，选中未上浮的 <mat-label> 元素，查看计算样式中 transform、position、transition 属性是否被划掉（被自定义样式覆盖）
  2. 如果确认是样式覆盖问题，可以在全局样式文件中加入以下强制规则：

  /* 修复outline风格表单标签浮动问题 */
  mat-form-field.mat-form-field-appearance-outline .mat-form-field-label {
    transition: transform 0.2s ease, color 0.2s ease !important;
  }
  mat-form-field.mat-focused .mat-form-field-label,
  mat-form-field.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.28125em) scale(0.75) !important;
  }
  

• FormControl 初始化异常
  如果你初始化表单时给字段赋值了 null、undefined，或者异步赋值未触发变更检测，会导致 Material 无法识别字段已有值，标签不会上浮。建议初始化时给所有表单字段默认设为空字符串：

  import { FormBuilder, Validators } from '@angular/forms';
  // 省略组件其他代码
  constructor(private fb: FormBuilder) {}
  
  bindingAuthorForm = this.fb.group({
    bindingName: ['', [Validators.required, Validators.pattern(/^[a-z0-9_]+$/)]],
    version: ['', Validators.required],
    authorName: ['', Validators.required],
    plainText: ['', [Validators.maxLength(140)]],
    bindingType: ['', Validators.required]
  })
  

• 模块导入缺失
  确认当前组件所在的模块已经导入以下三个必要模块，缺任意一个都可能导致状态检测失效：

  import { ReactiveFormsModule } from '@angular/forms';
  import { MatFormFieldModule } from '@angular/material/form-field';
  import { MatInputModule } from '@angular/material/input';
  

• 属性冲突
  你的「Short Description」字段同时设置了 <mat-label> 和 placeholder 属性，outline 风格的 Material 表单不需要额外加 placeholder，删除该属性即可避免冲突。

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