angular / angular/components

bug(MatDatePicker, MatStepper): Min/Max validation on Datepicker doesn't update on step change in Stepper

Open
#20,114 5 comments 0 reactions 0 assignees View on GitHub
area: material/datepicker G P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Reproduction
https://stackblitz.com/edit/angular-9-material-starter-ctvwko

Steps to reproduce:
1. Set dates on step one to be valid (for example: 20/07/2020 - 27/07/2020)
2. Go to step two on mat-stepper then back to step one.
3. Change dates to be the same (25/07/2020 - 25/07/2020)
4. Go to step two on mat-stepper then back to step one.
5. Change dates to be in range from first repro step and different than step 3. (for example 20/07/2020 - 23/07/2020).
6. Error appear `{ "matDatepickerMin": { "min": "2020-07-24T22:00:00.000Z", "actual": "2020-07-22T22:00:00.000Z" } }`. It's min date from repro step 3.


#### Expected Behavior
Error shouldn't appear as date is in valid range.

#### Actual Behavior
Datepicker doesn't revalidate form control when step is changed.

#### Environment

- Angular: 9.1.2
- CDK/Material: 9.2.1
- Browser(s): All
- Operating System: Windows

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and follow the MatDatePicker and MatStepper behavior through the listed navigation and date changes. The fix is done when returning between steps causes the date controls to revalidate, so a valid date range no longer retains the earlier matDatepickerMin error.

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
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.