bug(material/datepicker): zoneless ERROR RuntimeError: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. MatDateRangeInput

[anisabboud]

Description

1. Using <mat-date-range-picker>
2. with Reactive Forms
3. with Zoneless change detection + debug

=> When selecting start & end date, ExpressionChangedAfterItHasBeenCheckedError is thrown by MatDateRangeInput.

ERROR RuntimeError: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
Previous value: 'End date'. Current value: '2/14/2025'.
Expression location: MatDateRangeInput component.
Find more at https://angular.dev/errors/NG0100

Reproduction

StackBlitz link: https://stackblitz.com/edit/5xybntje?file=src%2Fmain.ts

Steps to reproduce:

1. Go to the Material datepicker examples https://material.angular.io/components/datepicker/examples
2. Open the second example "Date range picker forms integration" in StackBlitz
3. Enable Zoneless change detection, by going to main.ts and adding:
   provideExperimentalZonelessChangeDetection(), provideExperimentalCheckNoChangesForDebug({ interval: 1000, exhaustive: true })
4. Open the datepicker, select a date range (e.g., Feb 10-14), and check the console. You'll find an infinite loop of NG0100 errors.

Expected Behavior

mat-date-range-picker should work well with Reactive Forms & Zoneless change detection.

Actual Behavior

NG0100: ExpressionChangedAfterItHasBeenCheckedError infinite loop in MatDateRangeInput component when selecting start & end dates.

Similar zoneless issue in mat-selection-list: #30522

Environment

• Angular: 19.1.7 (latest)
• CDK/Material: 19.1.5 (latest)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}