angular-material - mat-form-field floatLabel ="never"不工作

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>

始终和自动工作，但似乎永远不会让它消失。

Answer 1

设法想出了以下scss来模仿不 float 的标签:

.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它应该工作。