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

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

@@ -687,6 +687,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

@@ -294,12 +294,7 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
 
   // 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 && !this._isBadInput();
   }
 
   // Implemented as part of MatFormFieldControl.