-
Notifications
You must be signed in to change notification settings - Fork 6.8k
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
No response
Description
The reset() method of Angular Material's mat-stepper component is expected to reset the stepper and associated form groups to their initial state, clearing any user input and resetting form validation states. However, when using the reset() method with reactive forms, the form controls are unexpectedly marked as touched or dirty, causing validation errors to display immediately. This behavior is not intuitive and negatively impacts user experience, as the form appears to have errors even though no user interaction has occurred post-reset.
Reproduction
StackBlitz link:
Steps to reproduce:
- Create a stepper with multiple steps using Angular Material and reactive forms.
- Assign required validators to form controls in each step.
- Complete the stepper steps, then use the
reset()method on the stepper to reset it. - Observe that form controls are marked as
touchedordirtyeven though the stepper was reset, and validation errors are displayed. - Alternatively, you can also use the native
mat-stepper: https://material.angular.io/components/stepper/examples#stepper-errors
Expected Behavior
After calling stepper.reset(), all form controls should be reset to their initial state, marked as pristine and untouched. No validation errors should be displayed until the user interacts with the form controls again.
Actual Behavior
Calling stepper.reset() resets the stepper and form groups but marks all form controls as touched or dirty, triggering validation errors to display immediately.
Environment
- Angular:
18.1.1 - CDK/Material:
18.1.1 - Browser(s):
Google Chrome(Version 127.0.6533.73 (Official Build) (arm64)) - Operating System (e.g. Windows, macOS, Ubuntu):
macOS(Sonoma 14.7), Apple M1