Is this a regression?
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:
- When a value is selected, everything works correctly.
- 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.
- 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):
Is this a regression?
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:
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