fix(input): fix error when md-maxlength attribute changes

Author: ajoslin

src/components/input/input.js

@@ -164,13 +164,9 @@ function inputTextareaDirective($mdUtil, $window, $compile, $animate) {
   return {
     restrict: 'E',
     require: ['^?mdInputContainer', '?ngModel'],
-    compile: compile,
+    link: postLink
   };
 
-  function compile(element) {
-    element.addClass('md-input');
-    return postLink;
-  }
   function postLink(scope, element, attr, ctrls) {
 
     var containerCtrl = ctrls[0];
@@ -182,6 +178,7 @@ function inputTextareaDirective($mdUtil, $window, $compile, $animate) {
     }
     containerCtrl.input = element;
 
+    element.addClass('md-input');
     if (!element.attr('id')) {
       element.attr('id', 'input_' + $mdUtil.nextUid());
     }
@@ -272,7 +269,7 @@ function inputTextareaDirective($mdUtil, $window, $compile, $animate) {
   }
 }
 
-function mdMaxlengthDirective() {
+function mdMaxlengthDirective($animate) {
   return {
     restrict: 'A',
     require: ['ngModel', '^mdInputContainer'],
@@ -292,7 +289,9 @@ function mdMaxlengthDirective() {
 
     ngModelCtrl.$formatters.push(renderCharCount);
     ngModelCtrl.$viewChangeListeners.push(renderCharCount);
-    element.on('input keydown', renderCharCount);
+    element.on('input keydown', function() { 
+      renderCharCount(); //make sure it's called with no args
+    });
 
     scope.$watch(attr.mdMaxlength, function(value) {
       maxlength = value;
@@ -311,11 +310,11 @@ function mdMaxlengthDirective() {
       if (!angular.isNumber(maxlength) || maxlength < 0) {
         return true;
       }
-      return ( element.val() || modelValue || viewValue || '' ).length <= maxlength;
+      return ( modelValue || element.val() || viewValue || '' ).length <= maxlength;
     };
 
     function renderCharCount(value) {
-      charCountEl.text( element.val().length + '/' + maxlength );
+      charCountEl.text( ( element.val() || value || '' ).length + '/' + maxlength );
       return value;
     }
   }

src/components/input/input.spec.js

@@ -55,4 +55,58 @@ describe('md-input-container directive', function() {
     expect(el.find('input').attr('id')).toBeTruthy();
     expect(el.find('label').attr('for')).toBe(el.find('input').attr('id'));
   }));
+
+  ddescribe('md-maxlength', function() {
+    function getCharCounter(el) {
+      return angular.element(el[0].querySelector('.md-char-counter'));
+    }
+
+    it('should work with a constant', inject(function($rootScope, $compile) {
+      var el = $compile('<form name="form">' +
+                          '<md-input-container>' +
+                            '<input md-maxlength="5" ng-model="foo" name="foo">' +
+                          '</md-input-container>' +
+                        '</form>')($rootScope);
+      $rootScope.$apply();
+      expect($rootScope.form.foo.$error['md-maxlength']).toBeFalsy();
+      expect(getCharCounter(el).text()).toBe('0/5');
+
+      $rootScope.$apply('foo = "abcde"');
+      expect($rootScope.form.foo.$error['md-maxlength']).toBeFalsy();
+      expect(getCharCounter(el).text()).toBe('5/5');
+
+      $rootScope.$apply('foo = "abcdef"');
+      el.find('input').triggerHandler('input');
+      expect($rootScope.form.foo.$error['md-maxlength']).toBe(true);
+      expect(getCharCounter(el).text()).toBe('6/5');
+
+      $rootScope.$apply('foo = "abc"');
+      el.find('input').triggerHandler('input');
+      expect($rootScope.form.foo.$error['md-maxlength']).toBeFalsy();
+      expect(getCharCounter(el).text()).toBe('3/5');
+    }));
+
+    it('should add and remove maxlength element & error with expression', inject(function($rootScope, $compile) {
+      var el = $compile('<form name="form">' +
+                          '<md-input-container>' +
+                            '<input md-maxlength="max" ng-model="foo" name="foo">' +
+                          '</md-input-container>' +
+                        '</form>')($rootScope);
+
+      $rootScope.$apply();
+      expect($rootScope.form.foo.$error['md-maxlength']).toBeFalsy();
+      expect(getCharCounter(el).length).toBe(0);
+
+      $rootScope.$apply('max = 5');
+      $rootScope.$apply('foo = "abcdef"');
+      expect($rootScope.form.foo.$error['md-maxlength']).toBeTruthy();
+      expect(getCharCounter(el).length).toBe(1);
+      expect(getCharCounter(el).text()).toBe('6/5');
+
+      $rootScope.$apply('max = -1');
+      $rootScope.$apply('foo = "abcdefg"');
+      expect($rootScope.form.foo.$error['md-maxlength']).toBeFalsy();
+      expect(getCharCounter(el).length).toBe(0);
+    }));
+  });
 });