fix(datepicker): matDatepickerParse error not being added on first invalid value

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.

Author: crisbeto

src/lib/datepicker/datepicker-input.ts

@@ -324,12 +324,19 @@ export class MatDatepickerInput<D> implements ControlValueAccessor, OnDestroy, V
     this._lastValueValid = !date || this._dateAdapter.isValid(date);
     date = this._getValidDateOrNull(date);
 
-    if (!this._dateAdapter.sameDate(date, this._value)) {
-      this._value = date;
+    const hasChanged = !this._dateAdapter.sameDate(date, this._value);
+
+    // We need to fire the CVA change event for all
+    // nulls, otherwise the validators won't run.
+    if (!date || hasChanged) {
       this._cvaOnChange(date);
-      this._valueChange.emit(date);
       this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement));
     }
+
+    if (hasChanged) {
+      this._value = date;
+      this._valueChange.emit(date);
+    }
   }
 
   _onChange() {

src/lib/datepicker/datepicker.spec.ts

@@ -8,6 +8,7 @@ import {
   dispatchFakeEvent,
   dispatchKeyboardEvent,
   dispatchMouseEvent,
+  typeInElement,
 } from '@angular/cdk/testing';
 import {Component, FactoryProvider, Type, ValueProvider, ViewChild} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, inject, TestBed, tick} from '@angular/core/testing';
@@ -875,6 +876,19 @@ describe('MatDatepicker', () => {
 
         expect(testComponent.datepickerToggle.disabled).toBe(true);
       });
+
+      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('Today', fixture.nativeElement.querySelector('input'));
+          fixture.detectChanges();
+
+          expect(formControl.hasError('matDatepickerParse')).toBe(true);
+        });
+
     });
 
     describe('datepicker with mat-datepicker-toggle', () => {