Skip to content

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

Open
@sqljim

Description

@sqljim

Documentation Feedback

Currently the documentation 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:

   <input matInput  [max]="period.get('endDate')?.value" formControlName="startDate"
    [matDatepicker]="startDatePicker"/>

and

<input matInput [min]="period.get('startDate')?.value" formControlName="endDate"
    [matDatepicker]="endDatePicker"/>

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.

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    P4A relatively minor issue that is not relevant to core functionsarea: material/datepicker

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions