Angular/Material mat-form-field 输入 - 浮动标签问题

假设您使用的是 Material 2 的最新稳定版本，
您可以使用 floatLabel=“never” 强制标签不浮动。

这是现场工作演示

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

Praveen Soni 上面的答案不适用于非遗留版本，如下所示：

注意：只有旧外观支持从不选项。从来都不是 最初添加的目的是为了使浮动标签模拟 标准输入占位符的行为。但是，表单字段现在 支持浮动标签和占位符。因此，在 非遗留外观 从不选项已被禁用，取而代之的是 只需使用占位符。

这意味着您应该简单地使用占位符而不是标签。

<div class="custom_autosuggestion">
   <mat-form-field class="example-full-width" floatLabel="never">
      <input class="custom_color_title"
      aria-label="Number" matInput [formControl]="myColorControl" type="text" name=""                                                  [matAutocomplete]="auto">
      <mat-placeholder class="custom_placeholder">{{templateParse.Search_Colors_by_Name_or_Code}}</mat-placeholder>
      <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredColorOptions | async" [value]="option">
                                                        <!-- {{option}} -->
      </mat-option>
      </mat-autocomplete>
   </mat-form-field>
</div>

<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，则占位符将开始表现得像标签一样，并且它会向上浮动。因此，要阻止这种情况，您应该手动将外观更新为“标准”，以便它不再像标签一样运行并保持占位符。

只需添加即floatLabel="never"mat-form-field

<mat-form-field floatLabel="never">
    <input type="text" matInput placeholder="Other">
</mat-form-field>

如您所见，光标位于字段内，但标签没有浮动。input

1.在mat-form-field中使用floatLabel=“never”

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

根据关于浮动标签的官方文档，占位符也被提升为不是外观“轮廓”的 mat-form-field 的标签。为防止出现这种情况，应指定一个空标签，如下所示：

  <mat-form-field class="example-full-width">
     <mat-label></mat-label> // THE EMPTY LABEL
     <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>