【问题标题】: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" 选项
            猜你喜欢
            • 2019-08-16
            • 2021-08-02
            • 2018-07-10
            • 2021-12-06
            • 2020-04-30
            • 2021-11-06
            • 1970-01-01
            • 2021-04-23
            • 1970-01-01
            相关资源
            最近更新 更多