fix(ngModel): let aliased validator directives work on any element

`ng(Pattern|Minlength|Maxlength)` directives will now validate the
`ngModel` when on an element that is not an `input` or
a `textarea`. Previously, only their HTML5 counterparts worked on
every element. This is because the three aforementioned validators
were extracted into  separate directives, whereas the aliased attribute
handling assumes the validators will only exist on `input|textarea`

The commit also adds a test for `ng-required`, although that validator
worked on all elements before this fix.

Fixes #12158

Author: Narretz

src/jqLite.js

@@ -556,9 +556,8 @@ function getBooleanAttrName(element, name) {
   return booleanAttr && BOOLEAN_ELEMENTS[nodeName_(element)] && booleanAttr;
 }
 
-function getAliasedAttrName(element, name) {
-  var nodeName = element.nodeName;
-  return (nodeName === 'INPUT' || nodeName === 'TEXTAREA') && ALIASED_ATTR[name];
+function getAliasedAttrName(name) {
+  return ALIASED_ATTR[name];
 }
 
 forEach({

src/ng/compile.js

@@ -1077,7 +1077,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
 
         var node = this.$$element[0],
             booleanKey = getBooleanAttrName(node, key),
-            aliasedKey = getAliasedAttrName(node, key),
+            aliasedKey = getAliasedAttrName(key),
             observer = key,
             nodeName;
 

test/ng/directive/validatorsSpec.js

@@ -219,6 +219,24 @@ describe('validators', function() {
       expect($rootScope.form.test.$modelValue).toBe('12340');
       expect(inputElm).toBeValid();
     });
+
+
+    it('should validate on non-input elements', inject(function($compile) {
+      $rootScope.pattern = '\\d{4}';
+      var elm = $compile('<span ng-model="value" pattern="\\d{4}"></span>')($rootScope);
+      var elmNg = $compile('<span ng-model="value" ng-pattern="pattern"></span>')($rootScope);
+      var ctrl = elm.controller('ngModel');
+      var ctrlNg = elmNg.controller('ngModel');
+
+      expect(ctrl.$error.pattern).not.toBe(true);
+      expect(ctrlNg.$error.pattern).not.toBe(true);
+
+      ctrl.$setViewValue('12');
+      ctrlNg.$setViewValue('12');
+
+      expect(ctrl.$error.pattern).toBe(true);
+      expect(ctrlNg.$error.pattern).toBe(true);
+    }));
   });
 
 
@@ -283,6 +301,24 @@ describe('validators', function() {
       helper.changeInputValueTo('12345');
       expect(ctrl.$isEmpty).toHaveBeenCalledWith('12345');
     });
+
+
+    it('should validate on non-input elements', inject(function($compile) {
+      $rootScope.min = 3;
+      var elm = $compile('<span ng-model="value" minlength="{{min}}"></span>')($rootScope);
+      var elmNg = $compile('<span ng-model="value" ng-minlength="min"></span>')($rootScope);
+      var ctrl = elm.controller('ngModel');
+      var ctrlNg = elmNg.controller('ngModel');
+
+      expect(ctrl.$error.minlength).not.toBe(true);
+      expect(ctrlNg.$error.minlength).not.toBe(true);
+
+      ctrl.$setViewValue('12');
+      ctrlNg.$setViewValue('12');
+
+      expect(ctrl.$error.minlength).toBe(true);
+      expect(ctrlNg.$error.minlength).toBe(true);
+    }));
   });
 
 
@@ -453,6 +489,24 @@ describe('validators', function() {
       helper.changeInputValueTo('12345');
       expect(ctrl.$isEmpty).toHaveBeenCalledWith('12345');
     });
+
+
+    it('should validate on non-input elements', inject(function($compile) {
+      $rootScope.max = 3;
+      var elm = $compile('<span ng-model="value" maxlength="{{max}}"></span>')($rootScope);
+      var elmNg = $compile('<span ng-model="value" ng-maxlength="max"></span>')($rootScope);
+      var ctrl = elm.controller('ngModel');
+      var ctrlNg = elmNg.controller('ngModel');
+
+      expect(ctrl.$error.maxlength).not.toBe(true);
+      expect(ctrlNg.$error.maxlength).not.toBe(true);
+
+      ctrl.$setViewValue('1234');
+      ctrlNg.$setViewValue('1234');
+
+      expect(ctrl.$error.maxlength).toBe(true);
+      expect(ctrlNg.$error.maxlength).toBe(true);
+    }));
   });
 
 
@@ -547,6 +601,7 @@ describe('validators', function() {
       expect(inputElm).toBeValid();
     });
 
+
     it('should validate emptiness against the viewValue', function() {
       var inputElm = helper.compileInput('<input type="text" name="input" ng-model="value" required />');
 
@@ -560,5 +615,23 @@ describe('validators', function() {
       helper.changeInputValueTo('12345');
       expect(ctrl.$isEmpty).toHaveBeenCalledWith('12345');
     });
+
+
+    it('should validate on non-input elements', inject(function($compile) {
+      $rootScope.value = '12';
+      var elm = $compile('<span ng-model="value" required></span>')($rootScope);
+      var elmNg = $compile('<span ng-model="value" ng-required="true"></span>')($rootScope);
+      var ctrl = elm.controller('ngModel');
+      var ctrlNg = elmNg.controller('ngModel');
+
+      expect(ctrl.$error.required).not.toBe(true);
+      expect(ctrlNg.$error.required).not.toBe(true);
+
+      ctrl.$setViewValue('');
+      ctrlNg.$setViewValue('');
+
+      expect(ctrl.$error.required).toBe(true);
+      expect(ctrlNg.$error.required).toBe(true);
+    }));
   });
 });