feat(input): make expressions work for ng-Maxlength and ng-Minlength

src/ng/directive/input.js

@@ -16,9 +16,9 @@ var inputType = {
    * @param {string} ngModel Assignable angular expression to data-bind to.
    * @param {string=} name Property name of the form under which the control is published.
    * @param {string=} required Sets `required` validation error key if the value is not entered.
-   * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than
+   * @param {expression=} ngMinlength Sets `minlength` validation error key if the value is shorter than
    *    minlength.
-   * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than
+   * @param {expression=} ngMaxlength Sets `maxlength` validation error key if the value is longer than
    *    maxlength.
    * @param {string=} ngPattern Sets `pattern` validation error key if the value does not match the
    *    RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for
@@ -93,9 +93,9 @@ var inputType = {
    * @param {string=} min Sets the `min` validation error key if the value entered is less then `min`.
    * @param {string=} max Sets the `max` validation error key if the value entered is greater then `min`.
    * @param {string=} required Sets `required` validation error key if the value is not entered.
-   * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than
+   * @param {expression=} ngMinlength Sets `minlength` validation error key if the value is shorter than
    *    minlength.
-   * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than
+   * @param {expression=} ngMaxlength Sets `maxlength` validation error key if the value is longer than
    *    maxlength.
    * @param {string=} ngPattern Sets `pattern` validation error key if the value does not match the
    *    RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for
@@ -159,9 +159,9 @@ var inputType = {
    * @param {string} ngModel Assignable angular expression to data-bind to.
    * @param {string=} name Property name of the form under which the control is published.
    * @param {string=} required Sets `required` validation error key if the value is not entered.
-   * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than
+   * @param {expression=} ngMinlength Sets `minlength` validation error key if the value is shorter than
    *    minlength.
-   * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than
+   * @param {expression=} ngMaxlength Sets `maxlength` validation error key if the value is longer than
    *    maxlength.
    * @param {string=} ngPattern Sets `pattern` validation error key if the value does not match the
    *    RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for
@@ -224,9 +224,9 @@ var inputType = {
    * @param {string} ngModel Assignable angular expression to data-bind to.
    * @param {string=} name Property name of the form under which the control is published.
    * @param {string=} required Sets `required` validation error key if the value is not entered.
-   * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than
+   * @param {expression=} ngMinlength Sets `minlength` validation error key if the value is shorter than
    *    minlength.
-   * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than
+   * @param {expression=} ngMaxlength Sets `maxlength` validation error key if the value is longer than
    *    maxlength.
    * @param {string=} ngPattern Sets `pattern` validation error key if the value does not match the
    *    RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for
@@ -460,39 +460,30 @@ function textInputType(scope, element, attr, ctrl, $sniffer, $browser) {
     ctrl.$parsers.push(patternValidator);
   }
 
-  // min length validator
-  if (attr.ngMinlength) {
-    var minlength = int(attr.ngMinlength);
-    var minLengthValidator = function(value) {
-      if (!isEmpty(value) && value.length < minlength) {
-        ctrl.$setValidity('minlength', false);
-        return undefined;
-      } else {
-        ctrl.$setValidity('minlength', true);
-        return value;
-      }
-    };
-
-    ctrl.$parsers.push(minLengthValidator);
-    ctrl.$formatters.push(minLengthValidator);
-  }
+  function applyMinMaxLength(minOrMax, langthInvalid) {
+    if (attr.hasOwnProperty(minOrMax)) {
+      var validityValue = minOrMax === 'ngMinlength' ? 'minlength' : 'maxlength';
+      var validator = function(value) {
+        var parsedValue = parseFloat(attr[minOrMax], 10);
+        if (!isEmpty(value) && langthInvalid(value, parsedValue)) {
+          ctrl.$setValidity(validityValue, false);
+          return undefined;
+        } else {
+          ctrl.$setValidity(validityValue, true);
+          return value;
+        }
+      };
 
-  // max length validator
-  if (attr.ngMaxlength) {
-    var maxlength = int(attr.ngMaxlength);
-    var maxLengthValidator = function(value) {
-      if (!isEmpty(value) && value.length > maxlength) {
-        ctrl.$setValidity('maxlength', false);
-        return undefined;
-      } else {
-        ctrl.$setValidity('maxlength', true);
-        return value;
-      }
-    };
+      ctrl.$parsers.push(validator);
+      ctrl.$formatters.push(validator);
 
-    ctrl.$parsers.push(maxLengthValidator);
-    ctrl.$formatters.push(maxLengthValidator);
+      attr.$observe(minOrMax, function() {
+        ctrl.$setViewValue(ctrl.$viewValue);
+      });
+    }
   }
+  applyMinMaxLength('ngMinlength', function langthInvalid(value, min) {return value.length < min;});
+  applyMinMaxLength('ngMaxlength', function langthInvalid(value, max) {return value.length > max;});
 }
 
 function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
@@ -653,9 +644,9 @@ function checkboxInputType(scope, element, attr, ctrl) {
  * @param {string} ngModel Assignable angular expression to data-bind to.
  * @param {string=} name Property name of the form under which the control is published.
  * @param {string=} required Sets `required` validation error key if the value is not entered.
- * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than
+ * @param {expression=} ngMinlength Sets `minlength` validation error key if the value is shorter than
  *    minlength.
- * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than
+ * @param {expression=} ngMaxlength Sets `maxlength` validation error key if the value is longer than
  *    maxlength.
  * @param {string=} ngPattern Sets `pattern` validation error key if the value does not match the
  *    RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for
@@ -677,9 +668,9 @@ function checkboxInputType(scope, element, attr, ctrl) {
  * @param {string} ngModel Assignable angular expression to data-bind to.
  * @param {string=} name Property name of the form under which the control is published.
  * @param {string=} required Sets `required` validation error key if the value is not entered.
- * @param {number=} ngMinlength Sets `minlength` validation error key if the value is shorter than
+ * @param {expression=} ngMinlength Sets `minlength` validation error key if the value is shorter than
  *    minlength.
- * @param {number=} ngMaxlength Sets `maxlength` validation error key if the value is longer than
+ * @param {expression=} ngMaxlength Sets `maxlength` validation error key if the value is longer than
  *    maxlength.
  * @param {string=} ngPattern Sets `pattern` validation error key if the value does not match the
  *    RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for

test/ng/directive/inputSpec.js

@@ -505,7 +505,7 @@ describe('input', function() {
 
   describe('minlength', function() {
 
-    it('should invalid shorter than given minlenght', function() {
+    it('should invalid shorter than given minlength', function() {
       compileInput('<input type="text" ng-model="value" ng-minlength="3" />');
 
       changeInputValueTo('aa');
@@ -514,12 +514,31 @@ describe('input', function() {
       changeInputValueTo('aaa');
       expect(scope.value).toBe('aaa');
     });
+
+
+    it('should invalid shorter than given minlength-expressions', function() {
+      scope.$apply(function(){
+        scope.min = 5
+      });
+      compileInput('<input type="text" ng-model="value" ng-minlength="{{min}}" />');
+      changeInputValueTo('aa');
+      scope.$digest();
+      expect(scope.value).toBeUndefined();
+
+      changeInputValueTo('aaaaa');
+      expect(scope.value).toBe('aaaaa');
+
+      scope.$apply(function(){
+        scope.min = 6;
+      });
+      expect(scope.value).toBeUndefined();
+    });
   });
 
 
   describe('maxlength', function() {
 
-    it('should invalid shorter than given maxlenght', function() {
+    it('should invalid longer than given maxlength', function() {
       compileInput('<input type="text" ng-model="value" ng-maxlength="5" />');
 
       changeInputValueTo('aaaaaaaa');
@@ -528,6 +547,25 @@ describe('input', function() {
       changeInputValueTo('aaa');
       expect(scope.value).toBe('aaa');
     });
+
+
+    it('should invalid longer than given maxlength-expressions', function() {
+      scope.$apply(function(){
+        scope.max = 5
+      });
+      compileInput('<input type="text" ng-model="value" ng-maxlength="{{max}}" />');
+      changeInputValueTo('aaaaaaaa');
+      scope.$digest();
+      expect(scope.value).toBeUndefined();
+
+      changeInputValueTo('aaa');
+      expect(scope.value).toBe('aaa');
+
+      scope.$apply(function(){
+        scope.max = 2;
+      });
+      expect(scope.value).toBeUndefined();
+    });
   });