fix(NgModel): make ngMinlength and ngMaxlength as standalone directives

Fixes angular#6750

Author: matsko

src/AngularPublic.js

@@ -45,6 +45,10 @@
     ngChangeDirective,
     requiredDirective,
     requiredDirective,
+    minlengthDirective,
+    minlengthDirective,
+    maxlengthDirective,
+    maxlengthDirective,
     ngValueDirective,
     ngModelOptionsDirective,
     ngAttributeAliasDirectives,
@@ -184,6 +188,10 @@ function publishExternalAPI(angular){
             ngChange: ngChangeDirective,
             required: requiredDirective,
             ngRequired: requiredDirective,
+            ngMinlength: minlengthDirective,
+            minlength: minlengthDirective,
+            ngMaxlength: maxlengthDirective,
+            maxlength: maxlengthDirective,
             ngValue: ngValueDirective,
             ngModelOptions: ngModelOptionsDirective
         }).

src/ng/directive/input.js

@@ -998,22 +998,6 @@ function textInputType(scope, element, attr, ctrl, $sniffer, $browser) {
       return ctrl.$isEmpty(value) || isUndefined(regexp) || regexp.test(value);
     };
   }
-
-  // min length validator
-  if (attr.ngMinlength) {
-    var minlength = int(attr.ngMinlength);
-    ctrl.$validators.minlength = function(value) {
-      return ctrl.$isEmpty(value) || value.length >= minlength;
-    };
-  }
-
-  // max length validator
-  if (attr.ngMaxlength) {
-    var maxlength = int(attr.ngMaxlength);
-    ctrl.$validators.maxlength = function(value) {
-      return ctrl.$isEmpty(value) || value.length <= maxlength;
-    };
-  }
 }
 
 function weekParser(isoWeek) {
@@ -2134,6 +2118,43 @@ var requiredDirective = function() {
 };
 
 
+var maxlengthDirective = function() {
+  return {
+    require: '?ngModel',
+    link: function(scope, elm, attr, ctrl) {
+      if (!ctrl) return;
+
+      var maxlength = 0;
+      attr.$observe('maxlength', function(value) {
+        maxlength = int(value) || 0;
+        ctrl.$validate();
+      });
+      ctrl.$validators.maxlength = function(value) {
+        return ctrl.$isEmpty(value) || value.length <= maxlength;
+      };
+    }
+  };
+};
+
+var minlengthDirective = function() {
+  return {
+    require: '?ngModel',
+    link: function(scope, elm, attr, ctrl) {
+      if (!ctrl) return;
+
+      var minlength = 0;
+      attr.$observe('minlength', function(value) {
+        minlength = int(value) || 0;
+        ctrl.$validate();
+      });
+      ctrl.$validators.minlength = function(value) {
+        return ctrl.$isEmpty(value) || value.length >= minlength;
+      };
+    }
+  };
+};
+
+
 /**
  * @ngdoc directive
  * @name ngList

test/ng/directive/inputSpec.js

@@ -1323,6 +1323,24 @@ describe('input', function() {
 
       expect(value).toBe(5);
     });
+
+    it('should observe the standard minlength attribute and register it as a validator on the model', function() {
+      compileInput('<input type="text" 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);
+    });
   });
 
 
@@ -1351,6 +1369,24 @@ describe('input', function() {
 
       expect(value).toBe(10);
     });
+
+    it('should observe the standard maxlength attribute and register it as a validator on the model', function() {
+      compileInput('<input type="text" 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);
+    });
   });