fix(datepicker): corrected logic when determining if date is valid (#8045)

src/lib/datepicker/datepicker-input.ts

@@ -114,8 +114,8 @@ export class MatDatepickerInput<D> implements AfterContentInit, ControlValueAcce
   }
   set value(value: D | null) {
     value = coerceDateProperty(this._dateAdapter, value);
-    this._lastValueValid = !value || this._dateAdapter.isValid(value);
     value = this._getValidDateOrNull(value);
+    this._setLastValueValidity(value);
 
     let oldDate = this.value;
     this._value = value;
@@ -301,8 +301,8 @@ export class MatDatepickerInput<D> implements AfterContentInit, ControlValueAcce
 
   _onInput(value: string) {
     let date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
-    this._lastValueValid = !date || this._dateAdapter.isValid(date);
     date = this._getValidDateOrNull(date);
+    this._setLastValueValidity(date);
     this._value = date;
     this._cvaOnChange(date);
     this._valueChange.emit(date);
@@ -320,4 +320,12 @@ export class MatDatepickerInput<D> implements AfterContentInit, ControlValueAcce
   private _getValidDateOrNull(obj: any): D | null {
     return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
   }
+
+  /**
+   * Sets whether the last value entered in the input was valid
+   * @param lastValue The last value set on the input.
+   */
+  private _setLastValueValidity(lastValue: D | null): void {
+    this._lastValueValid = lastValue !== null;
+  }
 }

src/lib/datepicker/datepicker.spec.ts

@@ -49,6 +49,7 @@ describe('MatDatepicker', () => {
         declarations: [
           DatepickerWithChangeAndInputEvents,
           DatepickerWithFilterAndValidation,
+          DatepickerWithInputParseValidation,
           DatepickerWithFormControl,
           DatepickerWithISOStrings,
           DatepickerWithMinAndMaxValidation,
@@ -551,6 +552,52 @@ describe('MatDatepicker', () => {
       });
     });
 
+    describe('datepicker with input parse validation', () => {
+      let fixture: ComponentFixture<DatepickerWithInputParseValidation>;
+      let testComponent: DatepickerWithInputParseValidation;
+
+      beforeEach(async(() => {
+        fixture = TestBed.createComponent(DatepickerWithInputParseValidation);
+        fixture.detectChanges();
+
+        testComponent = fixture.componentInstance;
+      }));
+
+      afterEach(async(() => {
+        testComponent.datepicker.close();
+        fixture.detectChanges();
+      }));
+
+      it('should mark input invalid when input string is invalid', async(() => {
+        const validDateString = '2017-01-02';
+        const invalidDateString = '2017-99-99';
+        testComponent.dateinput._onInput(validDateString);
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+
+          expect(fixture.debugElement.query(By.css('input')).nativeElement.classList)
+              .toContain('ng-valid');
+          expect(testComponent.formControl.errors).toBeNull();
+
+          testComponent.dateinput._onInput(invalidDateString);
+          fixture.detectChanges();
+
+          fixture.whenStable().then(() => {
+            fixture.detectChanges();
+
+            expect(fixture.debugElement.query(By.css('input')).nativeElement.classList)
+                .toContain('ng-invalid');
+            expect(testComponent.formControl.errors).toBeDefined();
+            expect(testComponent.formControl.errors !== null ?
+                    testComponent.formControl.errors['matDatepickerParse'] :
+                    undefined).toBeDefined();
+          });
+        });
+      }));
+    });
+
     describe('datepicker with mat-datepicker-toggle', () => {
       let fixture: ComponentFixture<DatepickerWithToggle>;
       let testComponent: DatepickerWithToggle;
@@ -1199,6 +1246,21 @@ class DatepickerWithFilterAndValidation {
 }
 
 
+@Component({
+  template: `
+    <input [formControl]="formControl" [matDatepicker]="d" [(ngModel)]="date">
+    <mat-datepicker-toggle [for]="d"></mat-datepicker-toggle>
+    <mat-datepicker #d [touchUi]="true"></mat-datepicker>
+  `,
+})
+class DatepickerWithInputParseValidation {
+  @ViewChild('d') datepicker: MatDatepicker<Date>;
+  @ViewChild(MatDatepickerInput) dateinput: MatDatepickerInput<Date>;
+  formControl = new FormControl();
+  date: Date;
+}
+
+
 @Component({
   template: `
     <input [matDatepicker]="d" (change)="onChange()" (input)="onInput()"