角度/材质垫形式字段输入 - 浮动标签问题

Question

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

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

this

我查看了角度/材质的官方文档，但似乎现在不推荐使用此功能了吗？

Answer 1

假设您使用最新稳定版本的素材2，
你可以使用 floatLabel =＆＃34; never＆＃34; 来强制标签不要浮动。

这里是live working demo

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

中很明显

Answer 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，则占位符将像标签一样开始工作，并向上浮动。因此，要停止此操作，您应该手动将外观更新为“标准”，这样它就不会像标签一样停止运行，而是保持为占位符。

Answer 3

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

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

Answer 4

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

  

注意：仅旧外观支持Never选项。从来不是   最初是作为使浮动标签模仿   标准输入占位符的行为。但是现在表单字段   支持浮动标签和占位符。因此在   非旧版演出的Never选项已被禁用，以支持   只是使用占位符。

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

Answer 5

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

Answer 6

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

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

您可以看到图像，光标位于input字段内，但标签没有浮动。