Material Design：如何断开浮动标签以进行选择？答案

【问题标题】：Material Design: how to disconnect float label for select?Material Design：如何断开浮动标签以进行选择？
【发布时间】：2018-09-11 00:58:13
【问题描述】：

我需要创建没有浮动标签的选择字段，但我想要占位符和默认值。

我阅读了文档https://material.angular.io/components/form-field/overview#floating-label 并尝试自己做。

<mat-form-field [floatLabel]="never">
  <mat-select placeholder="All categories" [formControl]="catForm" multiple> //First opportunity for use placeholder
    <mat-option *ngFor="let category of categories" [value]="category.name">
      {{ category.name }}
    </mat-option>
  </mat-select>
  <!-- <mat-placeholder>All categories</mat-placeholder> -->//Second opportunity for use placeholder
</mat-form-field>

无论如何我都会得到浮动标签。那是我做错了吗？

【问题讨论】：

标签： material-design angular-material2

【解决方案1】：

正确的做法是：

<mat-form-field floatLabel="never">

变量的方括号。

【讨论】：

【解决方案2】：

Sergei R 对基本输入（输入类型=文本）有正确的用法，但对于下拉菜单（选择），它根本不起作用。甚至 Angular Material 文档 (https://material.angular.io/components/form-field/overview#floating-label) 也有示例代码（当针对此特定场景进行扩充时，floatLabel="never"）表明它不起作用：https://angular-vij8al.stackblitz.io

我添加了第四个示例，说明如何在没有标签的情况下获得占位符效果（但您失去了使用更复杂文本的能力）。

【讨论】：

【解决方案3】：

您甚至可以在 mat-select 上删除浮动标签，方法是将以下内容放入您的全局 styles.scss：

.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
  .mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label{
    display: none !important;
  }

如果您只想将其应用于一个 mat-select，您可以在上面的代码中进一步指定它。

当我看到以前的答案说它根本无法完成时，我已经放弃了，直到我看到关于 floatLabel 的另一个问题的答案：https://stackoverflow.com/a/66531080/14100714

【讨论】：