angular / angular/components

bug(material/datepicker): Adding a max to a datepicker input will fire valueChanges

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

Beschreibung

### Documentation Feedback

Currently the [documentation ](https://angular.io/api/forms/AbstractControl#valueChanges)only says that valueChanges will fire 'every time the value of the control changes' or 'each time you call enable() or disable()' however, I've also found valueChanges to fire if two inputs with datepickers rely upon one another for min and max.

My scenario is a period that has a start and end date. The start date cannot be after the end date, similarly the end date cannot be before the start. So basically my two form fields look like this:

```

```
and
```

```

What I've found is that the valueChanges of startDate will emit whenever the endDate is changed because of the startDate max.

It doesn't seem obvious in the documentation that setting the mib or max will cause the value of the control to change.

Here's a [stackblitz](https://stackblitz.com/edit/reactive-form-validation-angular-15-swfz9e?file=src/app/app.component.html).

Steps to reproduce:

1: Select a start date and see that its value is logged to the console via the valueChanges subscription on startDate.
2: Now make a change to the endDate field and note that the startDate valueChanges emits again.
3: Remove the [max]="period.get('endDate')?.value" from the startDate input and notice that the issue goes away.

### Affected documentation page

https://angular.io/api/forms/AbstractControl#valueChanges

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der betroffenen Dokumentationsseite zu AbstractControl.valueChanges und reproduziere das verlinkte StackBlitz-Szenario. Bestätige, dass das Ändern von min/max des datepicker dazu führt, dass das zugehörige Control ein Ereignis auslöst, und aktualisiere anschließend die Dokumentation, um dieses Verhalten zu beschreiben; abgeschlossen ist die Aufgabe, wenn die Seite den gemeldeten Fall korrekt abdeckt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
documentation
Issue-Typ
Dokumentation
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

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