fix: fix validation when min < max and val > max, fix tests in browsers without support

Author: Narretz

src/ng/directive/input.js

@@ -1529,7 +1529,7 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
     }
 
     // TODO(matsko): implement validateLater to reduce number of validations
-    if (minAttrType === 'min') {
+    if (supportsRange && minAttrType === 'min') {
       var elVal = element.val();
       // IE11 doesn't set the el val correctly if the maxVal is less than the element value
       if (minVal > elVal) {
@@ -1543,9 +1543,11 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
 
   var minAttrType = isDefined(attr.min) ? 'min' : attr.ngMin ? 'ngMin' : false;
   if (minAttrType) {
-    ctrl.$validators.min = isDefined(attr.min) && supportsRange && isDefined(validity.rangeUnderflow) ?
-      function nativeMinValidator(value) {
-        return !element[0].validity.rangeUnderflow;
+    // Since ngMin doesn't set the min attr, the browser doesn't adjust the input value as setting min would
+    ctrl.$validators.min = isDefined(attr.min) && supportsRange ?
+      function noopMinValidator(value) {
+        // Since all browsers set the input to a valid value, we don't need to check validity
+        return true;
       } :
       function minValidator(modelValue, viewValue) {
         return ctrl.$isEmpty(viewValue) || isUndefined(minVal) || viewValue >= minVal;
@@ -1567,7 +1569,7 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
       return;
     }
 
-    if (maxAttrType === 'max') {
+    if (supportsRange && maxAttrType === 'max') {
       var elVal = element.val();
       // IE11 doesn't set the el val correctly if the maxVal is less than the element value
       if (maxVal < elVal) {
@@ -1581,10 +1583,10 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
   var maxAttrType = isDefined(attr.max) ? 'max' : attr.ngMax ? 'ngMax' : false;
   if (maxAttrType) {
     // Since ngMax doesn't set the max attr, the browser doesn't adjust the input value as setting max would
-    ctrl.$validators.max = isDefined(attr.max) && supportsRange && isDefined(validity.rangeOverflow) ?
-      function nativeMaxValidator() {
-        // IE10+11 incorrectly set the rangeOverflow error when max < min
-        return (msie > 9 && maxVal < minVal) ? true : !element[0].validity.rangeOverflow;
+    ctrl.$validators.max = isDefined(attr.max) && supportsRange ?
+      function noopMaxValidator() {
+        // Since all browsers set the input to a valid value, we don't need to check validity
+        return true;
       } :
       function maxValidator(modelValue, viewValue) {
         return ctrl.$isEmpty(viewValue) || isUndefined(maxVal) || viewValue <= maxVal;

test/ng/directive/inputSpec.js

@@ -2981,6 +2981,40 @@ describe('input', function() {
           expect(scope.value).toBe(100);
           expect(scope.form.alias.$error.min).toBeFalsy();
         });
+
+        it('should validate even if the min value changes on-the-fly', function() {
+          scope.min = 10;
+          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" min="{{min}}" />');
+
+          helper.changeInputValueTo('15');
+          expect(inputElm).toBeValid();
+          expect(scope.value).toBe(15);
+
+          scope.min = 20;
+          scope.$digest();
+          expect(inputElm).toBeInvalid();
+          expect(scope.value).toBeUndefined();
+          expect(inputElm.val()).toBe('15');
+
+          scope.min = null;
+          scope.$digest();
+          expect(inputElm).toBeValid();
+          expect(scope.value).toBe(15);
+          expect(inputElm.val()).toBe('15');
+
+          scope.min = '16';
+          scope.$digest();
+          expect(inputElm).toBeInvalid();
+          expect(scope.value).toBeUndefined();
+          expect(inputElm.val()).toBe('15');
+
+          scope.min = 'abc';
+          scope.$digest();
+          expect(inputElm).toBeValid();
+          expect(scope.value).toBe(15);
+          expect(inputElm.val()).toBe('15');
+        });
+
       }
     });
 
@@ -3111,7 +3145,7 @@ describe('input', function() {
           scope.max = 0;
           scope.$digest();
           expect(inputElm).toBeInvalid();
-          expect(scope.value).toBe(5);
+          expect(scope.value).toBeUndefined();
           expect(inputElm.val()).toBe('5');
 
           scope.max = null;
@@ -3123,7 +3157,7 @@ describe('input', function() {
           scope.max = '4';
           scope.$digest();
           expect(inputElm).toBeInvalid();
-          expect(scope.value).toBe(5);
+          expect(scope.value).toBeUndefined();
           expect(inputElm.val()).toBe('5');
 
           scope.max = 'abc';