fix(input): validate minlength/maxlength for non-string values

caitp · caitp · commit 77ce5b89f97a · 2014-08-29T13:20:03.000-04:00
Use the viewValue rather than modelValue when validating. The viewValue should always be a string, and should reflect what the user has entered, or the formatted model value. BREAKING CHANGE: Always uses the viewValue when validating minlength and maxlength. Closes angular#7967 Closes angular#8811
diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js
@@ -2473,8 +2473,8 @@ var maxlengthDirective = function() {
         maxlength = int(value) || 0;
         ctrl.$validate();
       });
-      ctrl.$validators.maxlength = function(value) {
-        return ctrl.$isEmpty(value) || value.length <= maxlength;
+      ctrl.$validators.maxlength = function(modelValue, viewValue) {
+        return ctrl.$isEmpty(viewValue) || viewValue.length <= maxlength;
       };
     }
   };
@@ -2492,8 +2492,8 @@ var minlengthDirective = function() {
         minlength = int(value) || 0;
         ctrl.$validate();
       });
-      ctrl.$validators.minlength = function(value) {
-        return ctrl.$isEmpty(value) || value.length >= minlength;
+      ctrl.$validators.minlength = function(modelValue, viewValue) {
+        return ctrl.$isEmpty(viewValue) || viewValue.length >= minlength;
       };
     }
   };
diff --git a/test/ng/directive/inputSpec.js b/test/ng/directive/inputSpec.js
@@ -2901,6 +2901,97 @@ describe('input', function() {
         expect(scope.form.alias.$error.required).toBeTruthy();
       });
     });
+
+    describe('minlength', function() {
+
+      it('should invalidate values that are shorter than the given minlength', function() {
+        compileInput('<input type="number" ng-model="value" ng-minlength="3" />');
+
+        changeInputValueTo('12');
+        expect(inputElm).toBeInvalid();
+
+        changeInputValueTo('123');
+        expect(inputElm).toBeValid();
+      });
+
+      it('should listen on ng-minlength when minlength is observed', function() {
+        var value = 0;
+        compileInput('<input type="number" ng-model="value" ng-minlength="min" attr-capture />');
+        attrs.$observe('minlength', function(v) {
+          value = int(attrs.minlength);
+        });
+
+        scope.$apply(function() {
+          scope.min = 5;
+        });
+
+        expect(value).toBe(5);
+      });
+
+      it('should observe the standard minlength attribute and register it as a validator on the model', function() {
+        compileInput('<input type="number" name="input" ng-model="value" minlength="{{ min }}" />');
+        scope.$apply(function() {
+          scope.min = 10;
+        });
+
+        changeInputValueTo('12345');
+        expect(inputElm).toBeInvalid();
+        expect(scope.form.input.$error.minlength).toBe(true);
+
+        scope.$apply(function() {
+          scope.min = 5;
+        });
+
+        expect(inputElm).toBeValid();
+        expect(scope.form.input.$error.minlength).not.toBe(true);
+      });
+    });
+
+
+    describe('maxlength', function() {
+
+      it('should invalidate values that are longer than the given maxlength', function() {
+        compileInput('<input type="number" ng-model="value" ng-maxlength="5" />');
+
+        changeInputValueTo('12345678');
+        expect(inputElm).toBeInvalid();
+
+        changeInputValueTo('123');
+        expect(inputElm).toBeValid();
+      });
+
+      it('should listen on ng-maxlength when maxlength is observed', function() {
+        var value = 0;
+        compileInput('<input type="number" ng-model="value" ng-maxlength="max" attr-capture />');
+        attrs.$observe('maxlength', function(v) {
+          value = int(attrs.maxlength);
+        });
+
+        scope.$apply(function() {
+          scope.max = 10;
+        });
+
+        expect(value).toBe(10);
+      });
+
+      it('should observe the standard maxlength attribute and register it as a validator on the model', function() {
+        compileInput('<input type="number" name="input" ng-model="value" maxlength="{{ max }}" />');
+        scope.$apply(function() {
+          scope.max = 1;
+        });
+
+        changeInputValueTo('12345');
+        expect(inputElm).toBeInvalid();
+        expect(scope.form.input.$error.maxlength).toBe(true);
+
+        scope.$apply(function() {
+          scope.max = 6;
+        });
+
+        expect(inputElm).toBeValid();
+        expect(scope.form.input.$error.maxlength).not.toBe(true);
+      });
+    });
   });
 
   describe('email', function() {
