fix(datepicker): validation error when adding text after date (#11110)

## PR Checklist
Please check that your PR fulfills the following requirements:

- [x] The commit message follows [our guidelines](https://github.com/angular/material/blob/master/.github/CONTRIBUTING.md#-commit-message-format)
- [x] Tests for the changes have been added (for bug fixes / features)
- [x] Docs have been added / updated (for bug fixes / features)

## PR Type
What kind of change does this PR introduce?
```
[x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Infrastructure changes
[ ] Other... Please describe:
```

## What is the current behavior?
this fixes a regression introduced in v1.1.0 against IE
however the test is able to reproduce the issue on Chrome

Issue Number: 
Fixes #9994. Closes #10520. Relates to #10015.

## What is the new behavior?
The test passes and datepicker validation and ngMessages work properly on IE.

## Does this PR introduce a breaking change?
```
[ ] Yes
[x] No
```

## Other information
thank you to Topher Fangio and Richard Hughes for the original solution

Author: Splaktar

src/components/datepicker/js/datepickerDirective.js

@@ -628,9 +628,31 @@
       this.ngModelCtrl.$setValidity('valid', date == null);
     }
 
+    var input = this.inputElement.value;
+    var parsedDate = this.locale.parseDate(input);
+
+    if (!this.isInputValid(input, parsedDate) && this.ngModelCtrl.$valid) {
+      this.ngModelCtrl.$setValidity('valid', date == null);
+    }
+
     angular.element(this.inputContainer).toggleClass(INVALID_CLASS, !this.ngModelCtrl.$valid);
   };
 
+  /**
+   * Check to see if the input is valid as the validation should fail if the model is invalid
+   *
+   * @param {String} inputString
+   * @param {Date} parsedDate
+   * @return {boolean} Whether the input is valid
+   */
+  DatePickerCtrl.prototype.isInputValid = function (inputString, parsedDate) {
+    return inputString === '' || (
+      this.dateUtil.isValidDate(parsedDate) &&
+      this.locale.isDateComplete(inputString) &&
+      this.isDateEnabled(parsedDate)
+    );
+  };
+
   /** Clears any error flags set by `updateErrorState`. */
   DatePickerCtrl.prototype.clearErrorState = function() {
     this.inputContainer.classList.remove(INVALID_CLASS);
@@ -655,11 +677,7 @@
 
     // An input string is valid if it is either empty (representing no date)
     // or if it parses to a valid date that the user is allowed to select.
-    var isValidInput = inputString == '' || (
-      this.dateUtil.isValidDate(parsedDate) &&
-      this.locale.isDateComplete(inputString) &&
-      this.isDateEnabled(parsedDate)
-    );
+    var isValidInput = this.isInputValid(inputString, parsedDate);
 
     // The datepicker's model is only updated when there is a valid input.
     if (isValidInput) {

src/components/datepicker/js/datepickerDirective.spec.js

@@ -348,6 +348,16 @@ describe('md-datepicker', function() {
       expect(controller.ngModelCtrl.$error['mindate']).toBe(true);
     });
 
+    it('should apply ngMessages errors when the date becomes invalid from keyboard input', function() {
+      populateInputElement('5/30/2012');
+      pageScope.$apply();
+      expect(controller.ngModelCtrl.$error['valid']).toBeFalsy();
+
+      populateInputElement('5/30/2012z');
+      pageScope.$apply();
+      expect(controller.ngModelCtrl.$error['valid']).toBeTruthy();
+    });
+
     it('should evaluate ngChange expression when date changes from keyboard input', function() {
       populateInputElement('2/14/1976');