fix(material/datepicker): matDatepickerParse error not being added on…

… first invalid value (#11524)

Fixes the datepicker not adding the `matDatepickerParse` error if the user enters an invalid string as their first value. The issue comes from the fact that we don't call the function from the `ControlValueAccessor` if the value hasn't changed, which means that the validator won't be re-run.

Fixes #11523.

(cherry picked from commit 09a906a)

src/material/datepicker/datepicker-input-base.ts

@@ -304,11 +304,12 @@ export abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelection
     let date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
     this._lastValueValid = this._isValidValue(date);
     date = this._dateAdapter.getValidDateOrNull(date);
+    const hasChanged = !this._dateAdapter.sameDate(date, this.value);
 
-    if (!this._dateAdapter.sameDate(date, this.value)) {
-      this._assignValue(date);
+    // We need to fire the CVA change event for all
+    // nulls, otherwise the validators won't run.
+    if (!date || hasChanged) {
       this._cvaOnChange(date);
-      this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));
     } else {
       // Call the CVA change handler for invalid values
       // since this is what marks the control as dirty.
@@ -320,6 +321,11 @@ export abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelection
         this._validatorOnChange();
       }
     }
+
+    if (hasChanged) {
+      this._assignValue(date);
+      this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));
+    }
   }
 
   _onChange() {

src/material/datepicker/datepicker.spec.ts

@@ -8,6 +8,7 @@ import {
   dispatchFakeEvent,
   dispatchKeyboardEvent,
   dispatchMouseEvent,
+  typeInElement,
 } from '../../cdk/testing/private';
 import {Component, Type, ViewChild, Provider, Directive, ViewEncapsulation} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, inject, TestBed, tick} from '@angular/core/testing';
@@ -1048,6 +1049,17 @@ describe('MatDatepicker', () => {
           subscription.unsubscribe();
         }),
       );
+
+      it('should set the matDatepickerParse error when an invalid value is typed for the first time', () => {
+        const formControl = fixture.componentInstance.formControl;
+
+        expect(formControl.hasError('matDatepickerParse')).toBe(false);
+
+        typeInElement(fixture.nativeElement.querySelector('input'), 'Today');
+        fixture.detectChanges();
+
+        expect(formControl.hasError('matDatepickerParse')).toBe(true);
+      });
     });
 
     describe('datepicker with mat-datepicker-toggle', () => {