angularjs Angular /材料垫表格字段输入-浮动标签问题

vmpqdwk3  于 2022-11-21  发布在  Angular
关注(0)|答案(7)|浏览(153)

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

<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 /材料,但似乎这个功能现在被弃用了?

lvjbypge

lvjbypge1#

假设您正在使用最新稳定版本的材料2,
您可以使用**floatLabel=“never”**强制标签不浮动。
这里是live working demo
这在文档https://material.angular.io/components/form-field/api中很清楚

cgh8pdjw

cgh8pdjw2#

<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没有出现在表单域中,占位符将开始像标签一样向上浮动。因此,要停止这种情况,您应该手动将外观更新为“标准”,这样它就不再像标签一样,而是作为占位符。

wa7juj8i

wa7juj8i3#

Praveen Soni的上述回答不适用于非遗留版本,如下所示:
注意:只有旧版外观支持从不选项。最初添加从不是为了使浮动标签模拟标准输入占位符的行为。但是,表单域现在支持浮动标签和占位符。因此,在非旧版外观中,从不选项已被禁用,而只使用占位符。
这意味着您只需使用占位符而不是标签。

sqyvllje

sqyvllje4#

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

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

wsewodh25#

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

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

如图所示,光标位于input字段内,但标签没有浮动。

zzlelutf

zzlelutf6#

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

eh57zj3b7#

根据浮动标签的官方文档,占位符也被提升为非“outline”外观的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>

相关问题