材料设计：如何断开选择器的浮动标签？

Question

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

我阅读了文档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>

无论如何我得到了浮动标签。我做错了什么吗？

- Sergei R

Answer 1

正确的方式是：

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

变量使用方括号。

- Sergei R

Answer 2

您可以通过将以下内容放入全局 styles.scss 中来删除 mat-select 上的浮动标签：

.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://dev59.com/dq7la4cB1Zd3GeqPbViH#66531080。

- Dcode22

Answer 3

Sergei R 对于基本输入（input type=text）的使用是正确的，但对于下拉菜单（select），它根本不起作用。即使 Angular Material 文档（https://material.angular.io/components/form-field/overview#floating-label）也有示例代码（当为此特定情况增加 floatLabel="never" 时），表明它不起作用：https://angular-vij8al.stackblitz.io。我添加了第四个示例，以便在没有标签的情况下获得占位符效果（但您会失去使用更复杂文本的能力）。

- Demetrios Christopher

Answer 4

只需在 SCSS 中使用以下代码：

::ng-deep .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;
}

- Akash

Answer 5

随着新版本的Angular Material发布，似乎我们需要：

.mdc-notched-outline[ng-reflect-open='true'] .mdc-notched-outline__notch {
  display: none;
}

- Wandrille