Angular/Material mat-form-field 输入 - 浮动标签问题

Question

有什么方法可以阻止占位符作为以下代码片段的标签浮动？

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

我已经查看了角度/材料的官方文档，但似乎现在不推荐使用此功能？

原文由 physicsboy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

假设您使用的是材料 2 的 最新稳定 版本，

您可以使用 floatLabel=“never” 强制标签不浮动。

这是 现场工作演示

这在文档 https://material.angular.io/components/form-field/api 中很清楚

原文由 Praveen Soni 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

请将 mat-form-field 的外观设置为标准，占位符将不再表现得像标签。

解释 ：默认情况下，mat-form-field 中的 mat-label 浮动并且 mat-form-field 的外观是“旧版”。这意味着如果表单字段中没有 mat-label，那么占位符将开始像标签一样向上浮动。因此，要停止这种情况，您应该手动将外观更新为“标准”，这样它就不再像标签那样表现，而是保持为占位符。

原文由 Renu Sharma 发布，翻译遵循 CC BY-SA 4.0 许可协议