bug(DateRangePicker): Validation Errors are inconsistent and/or broken
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
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
Hello, I'm currently trying to use DateRangePicker in my company's project but I came across some validation problems. Since I can't show my code, I will be using the example given in the docs to show a few of the weird behaviors I noticed. You can follow along with the [Date range picker forms integration example](https://material.angular.dev/components/datepicker/examples#date-range-picker-forms) in the docs.
I'm sorry for not using the intended way of creating the bug request but I saw no way to report basically identical bugs in one ticket in another way.
### Reproduction
**Link**: see description
**Steps to reproduce**:
#### Bug 1: Start/end stays invalid, then fixed by proxy
1. Set valid start & valid end (e.g. 9/9/2020 - 9/9/2020)
2. Set invalid end (e.g. 31/31/2020)
3. Make end valid by changing start
=> Expected: end is valid. Actual: end is still marked as invalid. This is because of the default Angular Forms behavior but I wish it would be overridden by DatePicker for these cases for better UX.
#### Bug 2: Any date invalid by itself won't show error message but turn field red
1. Set valid start & valid end (e.g. same as above)
2. Change day of start/end to e.g. 90 to make it invalid.
=> Expected: start/end field is marked red and an error message is displayed below. Actual: field is marked red but no error message appears.
#### Bug 3: The only way to make both errors show at the same time is ... weird
1. Set valid start & valid end (e.g. same as above)
2. Change end date to be earlier than start date
- **Expected**: end date marked red (because end < start?) but no error shown as both dates are still valid on their own and no specific mat-error is listed for this case in HTML.
- **Actual**: shows end date message (even though both are technically valid by themselves?)
3. Edit start date to invalid date, then directly back to valid date
=> Expected: same as above. Actual: shows start and end date message, even though start is now valid again and end date was never invalid by itself? Also, the start message should've appeared when it got invalid, not just now.
### Expected Behavior
see above
### Actual Behavior
see above
### Environment
- Angular: Tested with V17 - V20.2.2. Possibly valid for all versions with a DatePicker
- CDK/Material: Whatever is appropriate for given Angular version (any).
- Browser(s): Chrome (newest)
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 and 11 (Pro, 64bit)
Contributor guide
Research direction
Reproduce the three cases in the Date range picker forms integration example linked in the issue, starting with the stated Angular and Material versions. Trace the DateRangePicker validation and error-display behavior, then verify that invalid standalone dates, ordering errors, and corrections produce the documented expected states and messages.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100