fix(datepicker): placeholder not floating when an invalid value is typed in

Fixes the datepicker input's placeholder not floating if the user types in an invalid value. This was due to the datepicker's value being parsed to `null` which the form field inferred as empty. These changes switch to always check the DOM element, rather than the actual control value.

Fixes #8575.

Author: crisbeto

src/lib/datepicker/datepicker.spec.ts

@@ -679,6 +679,16 @@ describe('MatDatepicker', () => {
         expect(attachToRef.nativeElement.classList.contains('mat-form-field-underline'))
             .toBe(true, 'popup should be attached to mat-form-field underline');
       });
+
+      it('should float the placeholder when an invalid value is entered', () => {
+        testComponent.datepickerInput.value = 'totally-not-a-date' as any;
+        fixture.debugElement.nativeElement.querySelector('input').value = 'totally-not-a-date';
+        fixture.detectChanges();
+
+        expect(fixture.debugElement.nativeElement.querySelector('mat-form-field').classList)
+          .toContain('mat-form-field-should-float');
+      });
+
     });
 
     describe('datepicker with min and max dates and validation', () => {

src/lib/input/input.ts

@@ -264,13 +264,6 @@ export class MatInput implements MatFormFieldControl<any>, OnChanges, OnDestroy,
     return this._neverEmptyInputTypes.indexOf(this._type) > -1;
   }
 
-  /** Checks whether the input is invalid based on the native validation. */
-  protected _isBadInput() {
-    // The `validity` property won't be present on platform-server.
-    let validity = (this._elementRef.nativeElement as HTMLInputElement).validity;
-    return validity && validity.badInput;
-  }
-
   /** Determines if the component host is a textarea. If not recognizable it returns false. */
   protected _isTextarea() {
     let nativeElement = this._elementRef.nativeElement;
@@ -284,12 +277,7 @@ export class MatInput implements MatFormFieldControl<any>, OnChanges, OnDestroy,
 
   // Implemented as part of MatFormFieldControl.
   get empty(): boolean {
-    return !this._isNeverEmpty() &&
-        (this.value == null || this.value === '') &&
-        // Check if the input contains bad input. If so, we know that it only appears empty because
-        // the value failed to parse. From the user's perspective it is not empty.
-        // TODO(mmalerba): Add e2e test for bad input case.
-        !this._isBadInput();
+    return !this._isNeverEmpty() && !this._elementRef.nativeElement.value;
   }
 
   // Implemented as part of MatFormFieldControl.