don't assume min = 0 / max = 100 default for non-support browsers

test that support browsers enforce default min = 0 / max = 100

Author: Narretz

src/ng/directive/input.js

@@ -1547,9 +1547,9 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
   numberFormatterParser(ctrl);
   baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
 
-  var minVal = 0,
-      maxVal = 100,
-      supportsRange = ctrl.$$hasNativeValidators && element[0].type === 'range',
+  var supportsRange = ctrl.$$hasNativeValidators && element[0].type === 'range',
+      minVal = supportsRange ? 0 : undefined,
+      maxVal = supportsRange ? 100 : undefined,
       validity = element[0].validity,
       minAttrType = isDefined(attr.ngMin) ? 'ngMin' : isDefined(attr.min) ? 'min' : false,
       maxAttrType = isDefined(attr.ngMax) ? 'ngMax' : isDefined(attr.max) ? 'max' : false;
@@ -1594,7 +1594,7 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
   }
 
   function setInitialValueAndObserver(attrType, attrName, changeFn) {
-   var initialAttrValue;
+    var initialAttrValue;
     if (attrType === attrName) {
       initialAttrValue = attr[attrName];
       // Set the actual element attribute so that the browser can adjust the value based on
@@ -1612,7 +1612,7 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
     if (isDefined(val) && !isNumber(val)) {
       val = parseFloat(val);
     }
-    minVal = isNumber(val) && !isNaN(val) ? val : 0;
+    minVal = isNumber(val) && !isNaN(val) ? val : undefined;
     // ignore changes before model is initialized
     if (isNumber(ctrl.$modelValue) && isNaN(ctrl.$modelValue)) {
       return;
@@ -1622,8 +1622,8 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
       var elVal = element.val();
       // IE11 doesn't set the el val correctly if the minVal is greater than the element value
       if (minVal > elVal) {
-        element.val(minVal);
         elVal = minVal;
+        element.val(elVal);
       }
       ctrl.$setViewValue(elVal);
     } else {
@@ -1636,19 +1636,19 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
     if (isDefined(val) && !isNumber(val)) {
       val = parseFloat(val);
     }
-    maxVal = isNumber(val) && !isNaN(val) ? val : 100;
+    maxVal = isNumber(val) && !isNaN(val) ? val : undefined;
     // ignore changes before model is initialized
     if (isNumber(ctrl.$modelValue) && isNaN(ctrl.$modelValue)) {
       return;
     }
 
     if (supportsRange && maxAttrType === 'max') {
       var elVal = element.val();
-      // IE11 doesn't set the el val correctly if the maxVal is greater than the element value
+      // IE11 doesn't set the el val correctly if the maxVal is less than the element value
       if (maxVal < elVal) {
-        element.val(maxVal);
         // IE11 and Chrome don't set the value to the minVal when max < min
-        elVal = maxVal < minVal ? minVal : maxVal;
+        elVal = Math.max(minVal, maxVal);
+        element.val(elVal);
       }
       ctrl.$setViewValue(elVal);
     } else {

test/ng/directive/inputSpec.js

@@ -2976,6 +2976,22 @@ describe('input', function() {
           expect(scope.form.alias.$error.min).toBeFalsy();
         });
 
+        it('should set the model to the min val if it is less than the min val', function() {
+          scope.value = -10;
+          // Default min is 0
+          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" min="{{min}}" />');
+
+          expect(inputElm).toBeValid();
+          expect(inputElm.val()).toBe('0');
+          expect(scope.value).toBe(0);
+
+          scope.$apply('value = 5; min = 10');
+
+          expect(inputElm).toBeValid();
+          expect(inputElm.val()).toBe('10');
+          expect(scope.value).toBe(10);
+        });
+
         it('should adjust the element and model value when 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}}" />');
@@ -3009,8 +3025,9 @@ describe('input', function() {
         });
 
       } else {
+        // input[type=range] will become type=text in browsers that don't support it
+
         it('should validate if "range" is not implemented', function() {
-          // This will become type=text in browsers that don't support it
           var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" min="10" />');
 
           helper.changeInputValueTo('5');
@@ -3024,6 +3041,34 @@ describe('input', function() {
           expect(scope.form.alias.$error.min).toBeFalsy();
         });
 
+        it('should not assume a min val of 0 if the min interpolates to a non-number', function() {
+          scope.value = -10;
+          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" min="{{min}}" />');
+
+          expect(inputElm).toBeValid();
+          expect(inputElm.val()).toBe('-10');
+          expect(scope.value).toBe(-10);
+          expect(scope.form.alias.$error.min).toBeFalsy();
+
+          helper.changeInputValueTo('-5');
+          expect(inputElm).toBeValid();
+          expect(inputElm.val()).toBe('-5');
+          expect(scope.value).toBe(-5);
+          expect(scope.form.alias.$error.min).toBeFalsy();
+
+          scope.$apply('max = "null"');
+          expect(inputElm).toBeValid();
+          expect(inputElm.val()).toBe('-5');
+          expect(scope.value).toBe(-5);
+          expect(scope.form.alias.$error.max).toBeFalsy();
+
+          scope.$apply('max = "asdf"');
+          expect(inputElm).toBeValid();
+          expect(inputElm.val()).toBe('-5');
+          expect(scope.value).toBe(-5);
+          expect(scope.form.alias.$error.max).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}}" />');
@@ -3118,7 +3163,6 @@ describe('input', function() {
           expect(scope.form.alias.$error.max).toBeFalsy();
         });
 
-        // Browsers that implement range will never allow you to set the value > max value
         it('should validate', function() {
           var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" max="10" />');
 
@@ -3133,9 +3177,16 @@ describe('input', function() {
           expect(scope.form.alias.$error.max).toBeFalsy();
         });
 
-        it('should set the model to the max val if it is more than the max val', function() {
-          scope.value = 90;
-          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" max="10" />');
+        it('should set the model to the max val if it is greater than the max val', function() {
+          scope.value = 110;
+          // Default max is 100
+          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" max="{{max}}" />');
+
+          expect(inputElm).toBeValid();
+          expect(inputElm.val()).toBe('100');
+          expect(scope.value).toBe(100);
+
+          scope.$apply('value = 90; max = 10');
 
           expect(inputElm).toBeValid();
           expect(inputElm.val()).toBe('10');
@@ -3189,6 +3240,34 @@ describe('input', function() {
           expect(scope.form.alias.$error.max).toBeFalsy();
         });
 
+        it('should not assume a max val of 100 if the max attribute interpolates to a non-number', function() {
+          scope.value = 120;
+          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" max="{{max}}" />');
+
+          expect(inputElm).toBeValid();
+          expect(inputElm.val()).toBe('120');
+          expect(scope.value).toBe(120);
+          expect(scope.form.alias.$error.max).toBeFalsy();
+
+          helper.changeInputValueTo('140');
+          expect(inputElm).toBeValid();
+          expect(inputElm.val()).toBe('140');
+          expect(scope.value).toBe(140);
+          expect(scope.form.alias.$error.max).toBeFalsy();
+
+          scope.$apply('max = null');
+          expect(inputElm).toBeValid();
+          expect(inputElm.val()).toBe('140');
+          expect(scope.value).toBe(140);
+          expect(scope.form.alias.$error.max).toBeFalsy();
+
+          scope.$apply('max = "asdf"');
+          expect(inputElm).toBeValid();
+          expect(inputElm.val()).toBe('140');
+          expect(scope.value).toBe(140);
+          expect(scope.form.alias.$error.max).toBeFalsy();
+        });
+
         it('should validate even if the max value changes on-the-fly', function() {
           scope.max = 10;
           var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" max="{{max}}" />');