feat(autocomplete): pass md-input-max/min-length to the input with no…

…n-floating label (#9964)

Adds the md-input-minlength and md-input-maxlength attributes as ng-minlength and ng-maxlength to the input element of the autocomplete directive when a floating label is not used.
A use case : It would help in validating the input when the value of Search Text is being used if no matches are found.

Added Unit tests for md-input-maxlength and md-input-minlength

src/components/autocomplete/autocomplete.spec.js

@@ -596,7 +596,7 @@ describe('<md-autocomplete>', function() {
 
     describe('md-input-maxlength', function() {
 
-      it('should correctly set the form to invalid', inject(function($timeout) {
+      it('should correctly set the form to invalid if floating label is present', inject(function($timeout) {
         var scope = createScope(null, {inputId: 'custom-input-id'});
         var template =
           '<form name="testForm">' +
@@ -627,6 +627,35 @@ describe('<md-autocomplete>', function() {
         element.remove();
       }));
 
+      it('should correctly set the form to invalid when no floating label is present', inject(function($timeout) {
+        var scope = createScope(null, {inputId: 'custom-input-id'});
+        var template =
+          '<form name="testForm">' +
+            '<md-autocomplete ' +
+                'md-input-id="{{inputId}}" ' +
+                'md-input-maxlength="5" ' +
+                'md-input-name="testAutocomplete" ' +
+                'md-selected-item="selectedItem" ' +
+                'md-search-text="searchText" ' +
+                'md-items="item in match(searchText)" ' +
+                'md-item-text="item.display" >' +
+              '<span md-highlight-text="searchText">{{item.display}}</span>' +
+            '</md-autocomplete>' +
+          '</form>';
+
+        var element = compile(template, scope);
+        var input = element.find('input');
+
+        expect(scope.searchText).toBe('');
+        expect(scope.testForm.$valid).toBe(true);
+
+        scope.$apply('searchText = "Exceeded"');
+
+        expect(scope.testForm.$valid).toBe(false);
+
+        element.remove();
+      }));
+
       it('should not clear the view value if the input is invalid', inject(function($timeout) {
         var scope = createScope(null, {inputId: 'custom-input-id'});
         var template =
@@ -663,6 +692,72 @@ describe('<md-autocomplete>', function() {
 
     });
 
+    describe('md-input-minlength', function() {
+
+      it('should correctly set the form to invalid when floating label is present', inject(function($timeout) {
+        var scope = createScope(null, {inputId: 'custom-input-id'});
+        var template =
+          '<form name="testForm">' +
+            '<md-autocomplete ' +
+                'md-input-id="{{inputId}}" ' +
+                'md-input-minlength="4" ' +
+                'md-input-name="testAutocomplete" ' +
+                'md-selected-item="selectedItem" ' +
+                'md-search-text="searchText" ' +
+                'md-items="item in match(searchText)" ' +
+                'md-item-text="item.display" ' +
+                'tabindex="3"' +
+                'md-floating-label="Favorite state">' +
+              '<span md-highlight-text="searchText">{{item.display}}</span>' +
+            '</md-autocomplete>' +
+          '</form>';
+
+        var element = compile(template, scope);
+        var input = element.find('input');
+
+        scope.$apply('searchText = "abc"');
+
+        expect(scope.testForm.$valid).toBe(false);
+
+        scope.$apply('searchText = "abcde"');
+
+        expect(scope.testForm.$valid).toBe(true);
+
+        element.remove();
+      }));
+
+      it('should correctly set the form to invalid when no floating label is present', inject(function($timeout) {
+        var scope = createScope(null, {inputId: 'custom-input-id'});
+        var template =
+          '<form name="testForm">' +
+            '<md-autocomplete ' +
+                'md-input-id="{{inputId}}" ' +
+                'md-input-minlength="4" ' +
+                'md-input-name="testAutocomplete" ' +
+                'md-selected-item="selectedItem" ' +
+                'md-search-text="searchText" ' +
+                'md-items="item in match(searchText)" ' +
+                'md-item-text="item.display" >' +
+              '<span md-highlight-text="searchText">{{item.display}}</span>' +
+            '</md-autocomplete>' +
+          '</form>';
+
+        var element = compile(template, scope);
+        var input = element.find('input');
+
+        scope.$apply('searchText = "abc"');
+
+        expect(scope.testForm.$valid).toBe(false);
+
+        scope.$apply('searchText = "abcde"');
+
+        expect(scope.testForm.$valid).toBe(true);
+
+        element.remove();
+      }));
+
+    });
+
     describe('md-escape-options checks', function() {
       var scope, ctrl, element;
       var template = '\

src/components/autocomplete/js/autocompleteDirective.js

@@ -376,6 +376,8 @@ function MdAutocomplete ($$mdSvgRegistry) {
                 ng-required="$mdAutocompleteCtrl.isRequired"\
                 ng-disabled="$mdAutocompleteCtrl.isDisabled"\
                 ng-readonly="$mdAutocompleteCtrl.isReadonly"\
+                ng-minlength="inputMinlength"\
+                ng-maxlength="inputMaxlength"\
                 ng-model="$mdAutocompleteCtrl.scope.searchText"\
                 ng-keydown="$mdAutocompleteCtrl.keydown($event)"\
                 ng-blur="$mdAutocompleteCtrl.blur($event)"\