fix(datepicker): mark the input as invalid on submit, add missing import

* Fixes invalid datepickers not being highlighted when their parent form is submitted.
* Fixes $mdAria not being imported and causing a JS error occasionally.

Fixes #8411.

Closes #9050

Author: crisbeto

src/components/datepicker/js/datepickerDirective.js

@@ -53,7 +53,7 @@
    * </hljs>
    *
    */
-  function datePickerDirective($$mdSvgRegistry) {
+  function datePickerDirective($$mdSvgRegistry, $mdUtil, $mdAria) {
     return {
       template: function(tElement, tAttrs) {
         // Buttons are not in the tab order because users can open the calendar via keyboard
@@ -142,7 +142,8 @@
           }
 
           scope.$watch(mdInputContainer.isErrorGetter || function() {
-            return ngModelCtrl.$invalid && ngModelCtrl.$touched;
+            var parentForm = mdDatePickerCtrl.parentForm;
+            return ngModelCtrl.$invalid && (ngModelCtrl.$touched || (parentForm && parentForm.$submitted));
           }, mdInputContainer.setInvalid);
         }
       }
@@ -276,6 +277,9 @@
     /** @final */
     this.mdInputContainer = null;
 
+    /** @final */
+    this.parentForm = angular.element($mdUtil.getClosest($element, 'form')).controller('form');
+
     /**
      * Element from which the calendar pane was opened. Keep track of this so that we can return
      * focus to it when the pane is closed.
@@ -322,6 +326,18 @@
         }
       });
     }
+
+    if (self.parentForm) {
+      // If invalid, highlights the input when the parent form is submitted.
+      var parentSubmittedWatcher = $scope.$watch(function() {
+        return self.parentForm.$submitted;
+      }, function(isSubmitted) {
+        if (isSubmitted) {
+          self.updateErrorState();
+          parentSubmittedWatcher();
+        }
+      });
+    }
   }
 
   /**

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

@@ -126,7 +126,7 @@ describe('md-datepicker', function() {
     }).not.toThrow();
   });
 
-  describe('ngMessages suport', function() {
+  describe('ngMessages support', function() {
     it('should set the `required` $error flag', function() {
       pageScope.isRequired = true;
       populateInputElement('');
@@ -243,6 +243,31 @@ describe('md-datepicker', function() {
 
         expect(formCtrl.$error['filtered']).toBeTruthy();
       });
+
+      it('should add the invalid class when the form is submitted', function() {
+        // This needs to be recompiled, in order to reproduce conditions where a form is
+        // submitted, without the datepicker having being touched (usually it has it's value
+        // set to `myDate` by default).
+        ngElement && ngElement.remove();
+        pageScope.myDate = null;
+        pageScope.isRequired = true;
+
+        createDatepickerInstance('<form>' + DATEPICKER_TEMPLATE + '</form>');
+
+        var formCtrl = ngElement.controller('form');
+        var inputContainer = ngElement.controller('mdDatepicker').inputContainer;
+
+        expect(formCtrl.$invalid).toBe(true);
+        expect(formCtrl.$submitted).toBe(false);
+        expect(inputContainer).not.toHaveClass('md-datepicker-invalid');
+
+        pageScope.$apply(function() {
+          formCtrl.$setSubmitted(true);
+        });
+
+        expect(formCtrl.$submitted).toBe(true);
+        expect(inputContainer).toHaveClass('md-datepicker-invalid');
+      });
     });
   });