MatStepper treats steps as `interacted` if you immediately return to a previous step

[yoonjesung]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Angular-material forms should be presented in a non-error state when the conditions of the default ErrorStateMatcher are not met (not touched or not submitted)

What is the current behavior?

When a form is presented inside a mat-stepper, when traversing to a previous step, the form will be in an error state even if the form is pristine and un-submitted. Any attempt to try to reset the form or FormGroupDirective fails.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-fay224

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

[dominiccarroll]

look at stepper.ts line 77.
cscc hackathon 2018

[Standaa]

N.B : Even adding the optional directive does not prevent the issue from happening :
<mat-step [stepControl]="firstFormGroup" matStepperIcon="home" [optional]="isOptional">

@dominiccarroll You mean that DONE is called every time the header is clicked ?

[xumepadismal]

I believe @dominiccarroll meant this:

components/src/lib/stepper/stepper.ts

Line 77 in 994d3ab

const customErrorState = !!(control && control.invalid && this.interacted);

And according to the comment above that line, this behavior is by design. However I think it is confusing in situations like:

1. Optional step definitely shouldn't terrify a user with all-red controls
2. In non-linear mode, when a user can switch between steps just clicking the headings.

Maybe I missed something else, but currently my mind suggests me to show all step errors only if a user disallowed to switch the step. But any other interactions like skip, switch or back to other step shouldn't mark all the controls in that step as "isErrorState".

[KELbTIK]

Any updates on this?

[jelbourn]

(revisiting old issues)

Took a look at this. The crux of the issue here is that the stepper treats a step as interacted as soon as it is shown to the user. The form controls here use that interacted state to determine whether they should show error messages. Intuitive, I agree that it makes sense to not treat a step as interacted if you immediately return to a previous step. However, it's not clear how we could really implement this. Reclassifying this as a feature request.

[yoonjesung]

It’s been a while so I forget exactly the context, but I think in my case I was using the stepper more like a linear file upload submission wizard where once completed, the user could go back to the beginning of the stepper to then upload a different file. But when they went back to the beginning, the interacted state would cause all the fields to be in an error state. So I was more so looking for a clean way to reset state, which at the time of writing wasn’t obvious. I guess the intent of a stepper generally is a one and done kind of flow. If there isn’t an api already for this, maybe one can be included to cleanly and completely reset a step’s state which can be invoked as needed as part of a previous/next action or on form complete etc.?

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.