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

【问题标题】：Angular/Material mat-form-field input - Floating label issuesAngular/Material mat-form-field 输入 - 浮动标签问题
【发布时间】：2018-07-11 20:05:07
【问题描述】：

有什么方法可以阻止占位符作为以下 sn-p 代码的标签浮动？

<form class="search-form">
  <mat-form-field class="example-full-width">
     <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>

我查看了 angular/material 的官方文档，但现在似乎不推荐使用此功能？

【问题讨论】：

标签： html angularjs angular-material

【解决方案1】：

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

这里是live working demo

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

【讨论】：

使用此选项标签不会在我们添加值时保留。我希望标签保持漂浮状态。但应该保持不变，没有价值。知道如何实现这一目标吗？
使用可以使用floatLabel="always"

【解决方案2】：

<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 的外观是“旧版”。这意味着如果表单字段中不存在 mat-label，则占位符将开始表现得像标签一样并且它向上浮动。因此，要停止这种情况，您应该手动将外观更新为“标准”，这样它就不再表现得像标签并保留为占位符。

【讨论】：

【解决方案3】：

Praveen Soni 的上述回答不适用于非旧版本，如下所示：

注意：只有旧版外观支持 never 选项。从来不是最初添加是为了使浮动标签模拟标准输入占位符的行为。但是现在的表单域支持浮动标签和占位符。因此在 non-legacy 外观的 never 选项已被禁用以支持只是使用占位符。

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

<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>

【讨论】：

只需在 mat-form-field 中添加 floatLabel="never" 选项