CODEWITHSUNDEEP
angularangular-materialangular15
Hamdi
Hamdi

Reputation: 101

Appearance standard property not working in Angular 15

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:

an input field with a light gray background

Needed:

an input field with a white background

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

Upvotes: 9

Views: 12487

Answers (2)

Evgeni Peev
Evgeni Peev

Reputation: 81

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!important;
}
.mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background-color: white!important;
}

Upvotes: 8

D M
D M

Reputation: 7179

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.

Upvotes: 17

Related Questions