Angular/Material mat-form-field输入框浮动标签问题：如何禁用占位符上浮？

嘿，我刚好碰到过类似的需求！确实，Angular Material曾经有直接禁用占位符上浮的属性，但后来被弃用了，不过我们还是有靠谱的办法实现这个效果：

方法一：使用floatLabel="never"属性 #

这是官方推荐的替代方案，直接在mat-form-field上设置floatLabel="never"，就能强制标签（包括由占位符转换而来的标签）始终保持在输入框内，不会上浮。修改后的代码如下：

<form class="search-form">
  <mat-form-field class="example-full-width" floatLabel="never">
    <input class="toolbar-search" type="text" matInput placeholder="Search">
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

这里把原来的mat-placeholder换成了原生的placeholder属性，配合floatLabel="never"就能完美实现“占位符一直显示在输入框内”的效果。

方法二：通过CSS强制隐藏浮动标签 #

如果因为版本兼容问题，上面的方法不生效，还可以用CSS覆盖默认样式。给你的搜索表单添加专属样式，避免影响其他mat-form-field组件：

/* 仅针对当前搜索表单生效 */
.search-form .mat-form-field-label-wrapper {
  display: none !important;
}

/* 确保空状态下的标签也不显示 */
.search-form .mat-form-field-empty.mat-form-field-label {
  display: none !important;
}

这样就能彻底阻止标签上浮，让占位符始终保持在输入框内。

需要注意的是，你之前看到的“特性被弃用”应该是指旧版本的disableFloat属性，现在官方已经改用floatLabel选项来控制标签浮动行为啦。

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