floatLabel property of mat-form-field doesn't work

I use floatLabel property of mat-form-field, but it doesn’t work.

<mat-form-field [floatLabel]='always'>
        <mat-label>CyberSource Reference</mat-label>
        <input matInput placeholder="(Enter reference)" />
 </mat-form-field>

It has ‘CyberSource Reference’ as placeholder. Then it move to label on focus. Behavior doesn’t change with any value of floatLabel property. Any Ideas? MatFormFieldModule is loaded to my app. Thanks.

“@angular/material”: “^5.0.4”

Issue Analytics

State:
Created 6 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

9reactions

willshowellcommented, Feb 5, 2018

This is just a syntax error:

<mat-form-field floatLabel="always">

<mat-form-field [floatLabel]="'always'">

1reaction

inyryaevcommented, Feb 6, 2018

Yes, it is true, thank you -_-

Top Results From Across the Web

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

That means if a mat-label is not present with the form field then placeholder will start behaving like the label and it floats...

Form field - Angular Material

The floatLabel property of <mat-form-field> can be used to change this default floating behavior. It can be set to always to float the...

Switching Off the Float Label of Our Angular Material Form Field

We have a material search form field: <mat-form-field><input matInput placeholder="Search"></mat-form-field>. And we want to turn off the floating label.

<mat-label> in Angular Material - GeeksforGeeks

mat -label is similar to labels which we use in normal HTML forms. But the advantage with mat-label is that it has pre-defined...

Floating Label - Material Design

Every Text Field and Select should have a label, except for full-width text fields, which use the input's placeholder attribute instead. Labels are...