angular / angular/components

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

Offen
#31,836 1 Kommentar 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/datepicker P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Reproduziere die drei Fälle im im Issue verlinkten Integrationsbeispiel für Date range picker-Formulare, beginnend mit den angegebenen Angular- und Material-Versionen. Verfolge das Validierungs- und Fehleranzeigeverhalten von DateRangePicker und überprüfe anschließend, dass ungültige eigenständige Datumswerte, Sortierungsfehler und Korrekturen die dokumentierten erwarteten Zustände und Meldungen erzeugen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.