Appearance standard property not working in Angular 15

Question

The appearance="standard" property in Angular 15 is not working anymore. All appearances are working well except standard.

Why is this not working anymore?

Result:

Needed:

<mat-form-field class="form-field" Appearance="Standard">
    <input matInput formControlName="email" matInput placeholder="email" name="email" type="text" required>
</mat-form-field>

Guilder

Answer 1

The API for the property you're using changed from v14 to v15. Specifically, the legacy and standard appearances were removed.

Import Path	Summary of Changes
...	...
@angular/material/form-field	Style changes, some appearances removed, API changes
...	...

The reason the API changed is explained in the blog:

We’re happy to announce the refactoring of the Angular material components based on Material Design Components for Web (MDC) is now done! This change allows Angular to align even closer to the Material Design specification, reuse code from primitives developed by the Material Design team, and enable us to adopt Material 3 once we finalize the style tokens.

From the v14 docs, the valid values in Angular 14 are:

type MatFormFieldAppearance = 'legacy' | 'standard' | 'fill' | 'outline';

From the v15 docs, the valid values in Angular 15 are:

type MatFormFieldAppearance = 'fill' | 'outline';

---

If you want to keep using appearance="standard", you can try importing the MatLegacyFormFieldModule instead of the MatFormFieldModule. The blog mentions that, as long as you don't import both at the same time, they're interchangeable for now. This is to allow you to upgrade individual modules (both your own and Angular Material) at your own pace.

The old implementation of each new component is now deprecated, but still available from a “legacy” import. For example, you can import the old mat-button implementation by importing the legacy button module.

import {MatLegacyButtonModule} from '@angular/material/legacy-button';

Visit the Migration Guide for more information.

Yaakov

Answer 2

in Angular 15 it is not encouraged to use styles for customization of material library. However for such a small requirement you can use:

.mat-mdc-form-field-focus-overlay {
  background-color: white;
}
.mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: white
}

Counterstamp

Remember to use ::ng-deep before the classes – Sollars

It would be even better to add it in styles.scss (or a child file like material-overload.scss. If you want to be able to choose between standard and fill in your app, add a specific class for this, like .force-standard-appearance, which would be the parent of the style suggested here. If you know you will never use the fill design, then make it apply to your whole app, but add app-root as a parent CSS selector, so it overrides the default material style. – Culet