bug(mat-form-field): No animation for error message. #31712
Description
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
18
Description
When the form field becomes invalid and displays an error, the error message has no animation.
I investigated a bug in Angular 19, where the dependency on the @angular/animations module was removed, and native CSS animations were used for mat-form-field and other components.
However, subsequent fixes in pull request #30678 introduced changes that caused the animations to stop triggering.
A relevant comment in the commit e9b0157#r158059096 provides additional context for this issue.
Reproduction
This issue occurs on the Angular Material form field examples page:
https://material.angular.dev/components/form-field/examples#form-field-error.
Steps to reproduce:
- Click into the input field.
- Click away (blur).
- 'You must enter a value' error message show without animation.
Expected Behavior
The behavior should match that of Angular 18.
The error message should be displayed with animation.
Actual Behavior
When the form field becomes invalid and displays an error, the error message has no animation.
Environment
- Angular: 20.1.0
- CDK/Material: 20.1.1
- Browser(s): Chrome 139.0.7258.128
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 11