How to use an Angular Material mat-form-field, but with a normal placeholder

Question

Angular Material form fields are potentially very convenient because they add a bunch of classes to the surrounding element depending on whether the field is selected, empty, filled, etc. I want to use these classes to customize the style of the label and other custom elements placed inside the field container (example: making the label change color when the input is focused).

The problem is that Angular Material also adds a bunch of other properties, styles and elements that I don't want to deal with. Even if I add floatLabel="never" and floatPlaceholder="never", the placeholder is still removed from the input and turned into a label, which is positioned relative to the entire container. If I place other elements inside the mat-form-field element (like a regular label), this messes up the positioning of the placeholder-turned-label, causing it to appear outside the input.

Is there any way I can make Angular Material not turn the placeholder into a label, but just leave it as a normal placeholder?

IndigoFenix IndigoFenix · Accepted Answer · 2019-08-07T08:48:06

So I wasn't able to actually fix it properly, but I was able to get around the issue by adding styles to undo the style changes that Angular adds.

mat-form-field.mat-form-field-hide-placeholder .mat-input-element::placeholder{
    color: #ccc !important;
    -webkit-text-fill-color: #ccc !important;
}
mat-form-field.mat-form-field-hide-placeholder .mat-form-field-label-wrapper{
    display: none;
}

It would be nicer if there was a way to not have the .mat-form-field-hide-placeholder class added in the first place, but until someone figures this out this will have to do.

How to use an Angular Material mat-form-field, but with a normal placeholder

1 Answers