angular / angular/components

bug(DateRangePicker): Validation Errors are inconsistent and/or broken

Aperta
#31,836 1 commento 3 reazioni 0 assegnatari Vedi su GitHub
area: material/datepicker P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

### 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)

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Riproduci i tre casi nell’esempio di integrazione dei moduli Date range picker collegato nell’issue, iniziando dalle versioni indicate di Angular e Material. Traccia il comportamento di convalida e visualizzazione degli errori di DateRangePicker, quindi verifica che le date autonome non valide, gli errori di ordinamento e le correzioni producano gli stati e i messaggi previsti documentati.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Da chiarire
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.