bug(mat-form-field): CSS class generated by controlType of MatFormFieldControl is static, never changes if the control changes

[robmv]

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

mat-form-field is able to generate a CSS class based on the value of MatFormFieldControl's controlType. The problem is that when the MatFormFieldControl implementation changes dynamically the field always has the initial MatFormFieldControl CSS class, for example if the initial control is a mat-input and later changes to a mat-select the CSS class on the field will always be mat-mdc-form-field-type-mat-input

Note: The documentation says the prefix for the generated CSS class is mat-form-field-type but the real ones have the prefix mat-mdc-form-field-type. This could be a documentation bug or a regression from the legacy controls, but the prefix is a different bug that this one I am reporting.

Reproduction

StackBlitz link: https://stackblitz.com/edit/qbaesq

Steps to reproduce:

1. The demo shows two fields one that initially uses a mat-input and the other a mat-select
2. The button on the top switch the implementations of MatFormFieldControl used on the fields
3. After the switch an error is shown below each field, the error is a check that the field contains the correct CSS class for the control implementation.

Expected Behavior

No error should be shown because each field switch dynamically the control generated CSS class.

Actual Behavior

Fields don't change to the control CSS class dynamically, it always stays on the same initial class.

Environment

• Angular: 18.0.6
• CDK/Material: 18.0.6
• Browser(s): Firefox, Chromium
• Operating System (e.g. Windows, macOS, Ubuntu): Linux (Fedora)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}