mat-form-field floatLabel=“从不”不工作

Question

由于某些原因，使用Angular 8时，这个参数never对我的mat-select不起作用。

<mat-form-field appearance="outline" floatLabel="never">
   <mat-label>Lesson</mat-label>
   <mat-select [(value)]="selected" (selectionChange)="onMenuChange($event.value)">
   <mat-option value="T1">Lesson 1</mat-option>
   <mat-option value="T2">Lesson 2</mat-option>
   <mat-option value="T3">Lesson 3</mat-option>
   </mat-select>
</mat-form-field>

Always和Auto工作，但似乎永远不会让它消失。

Answer 1

我设法想出了下面的scss来模仿标签不浮动：

.some-custom-class-name {
  &.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: none;
    width: initial;
    opacity: 0;
  }
  &.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-outline-gap {
    border-top-color: initial;
  }
  /* Not required, only used to reposition the label slightly
  &.mat-form-field-appearance-outline .mat-form-field-label {
    top: 1.54375em;
    margin-top: -0.25em;
  }
  */
}

<mat-form-field appearance="outline" class="some-custom-class-name">
  <mat-label>Shouldn't float</mat-label>
  <input matInput>
</mat-form-field>

只需将some-custom-class-name类附加到mat-form-field，它就应该可以工作了。

Answer 2

请参考https://github.com/angular/components/issues/18267

只需在mat-select中添加占位符。

像这样：<mat-select placeholder="FL">

Answer 3

尝试使用floatLabel="never"或floatLabel="always"