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

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?

angular-material

Solution 1:^[1]

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.

Solution 2:^[2]

Turns out all you need to do is add appearance="none" to the field tag, e.g.:

  <mat-form-field appearance="none">
    <input matInput [(ngModel)]="email" placeholder="Email">
  </mat-form-field>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	IndigoFenix
Solution 2	Matt H

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

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]