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

Angular/Material mat-form-field input - Floating label issues

提问by physicsboy

Is there any way in which I can stop the placeholder from floating as a label for the following snippet of code?

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

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

I have looked at the official documentation for angular/material, but it seems this feature is now deprecated?

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

回答by Praveen Soni

assuming you are using latest stableversion of material 2,
you can use floatLabel="never"to force label to not to float.

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

here is live working demo

这是现场工作演示

this is clear in documentation https://material.angular.io/components/form-field/api

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

回答by Renu Sharma

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

Please set the appearance of mat-form-field to standard and the placeholder will stop behaving like label.

请将 mat-form-field 的外观设置为标准，占位符将不再像标签一样表现。

Explanation : By default the mat-label in mat-form-field floats and the appearance of mat-form-field is "legacy". That means if a mat-label is not present with the form field then placeholder will start behaving like the label and it floats upwards. So to stop this you should manually update the appearance to "standard", so it stops behaving like label and stays as a placeholder.

说明：默认情况下，mat-form-field 中的 mat-label 是浮动的，并且 mat-form-field 的外观是“legacy”。这意味着如果表单字段中不存在 mat-label，那么占位符将开始表现得像标签一样，它会向上浮动。因此，要停止此操作，您应该手动将外观更新为“标准”，这样它就不再表现得像标签一样并保持为占位符。

回答by WasiF

just add floatLabel="never"in mat-form-fieldi.e.

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

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

As you can see image, cursor is inside inputfield but label didn't float.

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

回答by Narayan Dheeraj Kumar

Praveen Soni's answer above doesn't work for non-legacy versions, as per this:

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

Note: only the legacy appearance supports the never option. never was originally added as a way to make the floating label emulate the behavior of a standard input placeholder. However the form field now supports both floating labels and placeholders. Therefore in the non-legacy appearances the never option has been disabled in favor of just using the placeholder.

注意：只有旧外观支持从不选项。never 最初添加的目的是使浮动标签模拟标准输入占位符的行为。但是，表单字段现在支持浮动标签和占位符。因此，在非传统外观中，已禁用 never 选项以支持仅使用占位符。

That means you should simply use placeholder instead of the label.

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

回答by Savin Sabu

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

回答by Nitin Lawande

1.Use floatLabel="never" in mat-form-field

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

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