fix(input[range]): correctly initialize with interpolated min / max values

The interpolation directive only sets the actual element attribute value after
a digest passed. That means previously the min/max values on input range were
not set when the first $render happened, so the browser would not adjust
the input value according to min/max. This meant the range input and model would
not be initialzed as expected.

With this change, input range will set the actual element attribute value during its own
linking phase, as it is already available on the attrs argument passed to the link fn.

Fixes angular#14982

Author: Narretz

src/ng/directive/input.js

@@ -1550,7 +1550,9 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
   var minVal = 0,
       maxVal = 100,
       supportsRange = ctrl.$$hasNativeValidators && element[0].type === 'range',
-      validity = element[0].validity;
+      validity = element[0].validity,
+      minAttrType = isDefined(attr.ngMin) ? 'ngMin' : isDefined(attr.min) ? 'min' : false,
+      maxAttrType = isDefined(attr.ngMax) ? 'ngMax' : isDefined(attr.max) ? 'max' : false;
 
   var originalRender = ctrl.$render;
 
@@ -1563,11 +1565,54 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
     } :
     originalRender;
 
+  if (minAttrType) {
+    ctrl.$validators.min = minAttrType === 'min' && supportsRange ?
+      function noopMinValidator() {
+        // Since all browsers set the input to a valid value, we don't need to check validity
+        return true;
+      } :
+      // ngMin doesn't set the min attr, so the browser doesn't adjust the input value as setting min would
+      function minValidator(modelValue, viewValue) {
+        return ctrl.$isEmpty(viewValue) || isUndefined(minVal) || viewValue >= minVal;
+      };
+
+    setInitialValueAndObserver(minAttrType, 'min', minChange);
+  }
+
+  if (maxAttrType) {
+    ctrl.$validators.max = maxAttrType === 'max' && supportsRange ?
+      function noopMaxValidator() {
+        // Since all browsers set the input to a valid value, we don't need to check validity
+        return true;
+      } :
+      // ngMax doesn't set the max attr, so the browser doesn't adjust the input value as setting max would
+      function maxValidator(modelValue, viewValue) {
+        return ctrl.$isEmpty(viewValue) || isUndefined(maxVal) || viewValue <= maxVal;
+      };
+
+    setInitialValueAndObserver(maxAttrType, 'max', maxChange);
+  }
+
+  function setInitialValueAndObserver(attrType, attrName, changeFn) {
+   var initialAttrValue;
+    if (attrType === attrName) {
+      initialAttrValue = attr[attrName];
+      // Set the actual element attribute so that the browser can adjust the value based on
+      // the max value, which might be interpolated
+      element.attr(attrName, initialAttrValue);
+    }
+
+    // This initalizes the min/max value, so that non-support browsers validate with the correct
+    // values during the initial $render
+    changeFn(initialAttrValue);
+    attr.$observe(attrName, changeFn);
+  }
+
   function minChange(val) {
     if (isDefined(val) && !isNumber(val)) {
       val = parseFloat(val);
     }
-    minVal = isNumber(val) && !isNaN(val) ? val : undefined;
+    minVal = isNumber(val) && !isNaN(val) ? val : 0;
     // ignore changes before model is initialized
     if (isNumber(ctrl.$modelValue) && isNaN(ctrl.$modelValue)) {
       return;
@@ -1587,36 +1632,19 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
     }
   }
 
-  var minAttrType = isDefined(attr.ngMin) ? 'ngMin' : isDefined(attr.min) ? 'min' : false;
-  if (minAttrType) {
-    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;
-      } :
-      // ngMin doesn't set the min attr, so the browser doesn't adjust the input value as setting min would
-      function minValidator(modelValue, viewValue) {
-        return ctrl.$isEmpty(viewValue) || isUndefined(minVal) || viewValue >= minVal;
-      };
-
-    // Assign minVal when the directive is linked. This won't run the validators as the model isn't ready yet
-    minChange(attr.min);
-    attr.$observe('min', minChange);
-  }
-
   function maxChange(val) {
     if (isDefined(val) && !isNumber(val)) {
       val = parseFloat(val);
     }
-    maxVal = isNumber(val) && !isNaN(val) ? val : undefined;
+    maxVal = isNumber(val) && !isNaN(val) ? val : 100;
     // 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 less than the element value
+      // IE11 doesn't set the el val correctly if the maxVal is greater than the element value
       if (maxVal < elVal) {
         element.val(maxVal);
         elVal = minVal;
@@ -1627,22 +1655,6 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
       ctrl.$validate();
     }
   }
-  var maxAttrType = isDefined(attr.max) ? 'max' : attr.ngMax ? 'ngMax' : false;
-  if (maxAttrType) {
-    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;
-      } :
-      // ngMax doesn't set the max attr, so the browser doesn't adjust the input value as setting max would
-      function maxValidator(modelValue, viewValue) {
-        return ctrl.$isEmpty(viewValue) || isUndefined(maxVal) || viewValue <= maxVal;
-      };
-
-    // Assign maxVal when the directive is linked. This won't run the validators as the model isn't ready yet
-    maxChange(attr.max);
-    attr.$observe('max', maxChange);
-  }
 
 }
 

test/ng/directive/inputSpec.js

@@ -2877,7 +2877,7 @@ describe('input', function() {
         expect(inputElm.val()).toEqual('50');
       });
 
-      it('should set model to 50 when no value specified', function() {
+      it('should set model to 50 when no value specified and default min/max', function() {
         var inputElm = helper.compileInput('<input type="range" ng-model="age" />');
 
         expect(inputElm.val()).toBe('50');
@@ -2887,7 +2887,7 @@ describe('input', function() {
         expect(scope.age).toBe(50);
       });
 
-      it('should parse non-number values to 50', function() {
+      it('should parse non-number values to 50 when default min/max', function() {
         var inputElm = helper.compileInput('<input type="range" ng-model="age" />');
 
         scope.$apply('age = 10');
@@ -3051,7 +3051,7 @@ describe('input', function() {
     describe('ngMin', function() {
 
       it('should validate', function() {
-        var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" ng-min="50" />');
+        var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" ng-min="20" />');
 
         helper.changeInputValueTo('1');
         expect(inputElm).toBeInvalid();
@@ -3074,6 +3074,7 @@ describe('input', function() {
         scope.min = 20;
         scope.$digest();
         expect(inputElm).toBeInvalid();
+        expect(inputElm.val()).toBe('15');
 
         scope.min = null;
         scope.$digest();
@@ -3093,6 +3094,18 @@ describe('input', function() {
     describe('max', function() {
 
       if (supportsRange) {
+        // Browsers that implement range will never allow you to set the value > max value
+        it('should initialize correctly with non-default model and max value', function() {
+          scope.value = 150;
+          scope.max = 150;
+          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" max="{{max}}" />');
+
+          expect(inputElm).toBeValid();
+          expect(inputElm.val()).toBe('150');
+          expect(scope.value).toBe(150);
+          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" />');
@@ -3204,15 +3217,15 @@ describe('input', function() {
       it('should validate', function() {
         var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" ng-max="5" />');
 
-        helper.changeInputValueTo('20');
-        expect(inputElm).toBeInvalid();
-        expect(scope.value).toBeUndefined();
-        expect(scope.form.alias.$error.max).toBeTruthy();
-
         helper.changeInputValueTo('0');
         expect(inputElm).toBeValid();
         expect(scope.value).toBe(0);
         expect(scope.form.alias.$error.max).toBeFalsy();
+
+        helper.changeInputValueTo('20');
+        expect(inputElm).toBeInvalid();
+        expect(scope.value).toBeUndefined();
+        expect(scope.form.alias.$error.max).toBeTruthy();
       });
 
       it('should validate even if the ngMax value changes on-the-fly', function() {
@@ -3245,22 +3258,21 @@ describe('input', function() {
 
       describe('min and max', function() {
 
-        it('should keep the initial default value when min and max are specified', function() {
+        it('should set the correct initial value when min and max are specified', function() {
           scope.max = 80;
           scope.min = 40;
           var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" max="{{max}}" min="{{min}}" />');
 
-          expect(inputElm.val()).toBe('50');
-          expect(scope.value).toBe(50);
+          expect(inputElm.val()).toBe('60');
+          expect(scope.value).toBe(60);
         });
 
-
         it('should set element and model value to min if max is less than min', function() {
           scope.min = 40;
           var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" max="{{max}}" min="{{min}}" />');
 
-          expect(inputElm.val()).toBe('50');
-          expect(scope.value).toBe(50);
+          expect(inputElm.val()).toBe('70');
+          expect(scope.value).toBe(70);
 
           scope.max = 20;
           scope.$digest();