Skip to content

bug(MatFormField): mdc-text-field--disabled class not applied #33628

Description

@thascoet

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When you have a MatFormField where the MatFormFieldControl can change overtime (with @if or @switch). When the value of the control is null => the class mdc-text-field--disabled is not applied correctly, leading to styling issue of the form.

Reproduction

StackBlitz link
In this project, there is a custom clearable MatSelect that implements FormValueControl with disabled and read-only features. When the form field is disabled or read-only, a simple MatInput is used instead of the MatSelect to remove the arrow and the options panel.
In addition there is two buttons to disable and make the select readonly.
Steps to reproduce:

  1. When a value is selected, everything works correctly.
  2. When the value is cleared (value === null), switching to disabled does not update the form style—it stays blue. This is because the mdc-text-field--disabled class is not applied to the MatFormField wrapper.
  3. Clicking on the label (or clicking anywhere on the MatFormField) seems to trigger a change detection cycle and update the DOM, which adds the mdc-text-field--disabled class.

I also checked the MatFormField source code: the mat-form-field-disabled class applied to is always properly applied because it is declared in the MatFormField component host parameters:
host: { ... , '[class.mat-form-field-disabled]': '_control.disabled', ... } (line 158)
However, the mdc-text-field--disabled class is inside the template at line 44: [class.mdc-text-field--disabled]="_control.disabled"

Expected Behavior

The mdc-text-field--disabled class is immediatly applied.

Actual Behavior

The mdc-text-field--disabled is not immediatly applied.

Environment

  • Angular: 22.1.0
  • CDK/Material: 22.1.0
  • Browser(s):
  • Operating System (e.g. Windows, macOS, Ubuntu):

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions