angular / angular/components

MatStepper navigation tiggers form validation when it's not touched

Open
#14,026 7 comments 12 reactions 0 assignees View on GitHub
area: cdk/stepper feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug, feature request, or proposal:
Bug

#### What is the expected behavior?
Form validation is triggered only if fields are touched.

#### What is the current behavior?
When navigating though a material stepper, the form validation is triggered even if the fields are not touched.

#### What are the steps to reproduce?
https://stackblitz.com/angular/nanlqdlandy
1. Submit first step, you will arrive to step 2
2. Go back to step 1
3. Go back to step 2

#### What is the use-case or motivation for changing an existing behavior?
I think it's pretty confusing for the user to show an error even if he/she didn't even start to touch the field.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
See stackblitz.

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and follow the MatStepper navigation sequence: submit step 1, return to it, then navigate to step 2 again. Compare validation behavior for untouched fields with the expected behavior, and consider the issue complete when navigating does not display validation errors for fields that remain untouched.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.