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

Question

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?

Answer 1

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

here is live working demo

this is clear in documentation 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>

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

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.

Answer 3

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

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.

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

Answer 4

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

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

Answer 5

just add floatLabel="never" in mat-form-field ie

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

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

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