bug(matStartDate,matEndDate): matStartDate & matEndDate in mat-date-range-input are touched and dirty from the beginning

[ilianiv]

Reproduction

StackBlitz: https://stackblitz.com/edit/angular-qpcqzz?embed=1&file=src/app/date-range-picker-forms-example.html

Steps to reproduce:

1. Bind [(ngModel)] to matStartDate & matEndDate in mat-date-range-input
2. Inspect ng-touched, ng-dirty and ng-pristine css classes of matStartDate & matEndDate inputs

Expected Behavior

Controls behind matStartDate & matEndDate must be pristine: true, dirty: false, touched: false at the beginning if
no one interacted with them

Actual Behavior

They are dirty, touched and not pristine

Environment

• Angular: 10.0.7
• CDK/Material: 10.1.2
• Browser(s): Any
• Operating System (e.g. Windows, macOS, Ubuntu): Any

[leotqn]

I have the same issue, it happens when an initial value is binded to the control, even if you do it like this:
formControl.setValue([ANY VALUE], { emitEvent: false });

[shanegilbert]

I am experiencing this same issue. I have replace the date range picker with two date pickers temporarily.

[shanegilbert]

Any update or recommended work around for this yet?

[wagnermaciel]

@shanegilbert I've looked into this a couple of times, but unfortunately have not made any serious progress. I will continue to debug in my spare time, but I am currently juggling a few different unrelated tasks.