角度/材质垫形式字段输入 - 浮动标签问题

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>

我已经查看了角度/材质的官方文档,但似乎这个功能现在已被弃用了？

Answer 1

假设您使用的是最新稳定版本的材质2,则
可以使用floatLabel ="never"强制标签不浮动.

这是现场工作演示

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

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 的外观是“legacy”。这意味着如果表单字段中不存在 mat-label，则占位符将开始表现得像标签一样，它会向上浮动。因此，要停止此操作，您应该手动将外观更新为“标准”，这样它就不再表现得像标签一样并保持为占位符。