fix(input[range]): make support for input[range] opt-in

Closes #15229

Author: gkalpak

docs/content/error/ngModel/numfmt.ngdoc

@@ -3,7 +3,8 @@
 @fullName Model is not of type `number`
 @description
 
-The `input[number]` and `input[range]` directives require the model to be a `number`.
+The `input[type="number"]` and `input[type="range"][ng-input-range]` directives require the model to
+be a `number`.
 
 If the model is something else, this error will be thrown.
 
@@ -17,7 +18,7 @@ pipeline.
 ## Example
 
 In this example, our model stores the number as a string, so we provide the `stringToNumber`
-directive to convert it into the format the `input[number]` directive expects.
+directive to convert it into the format the `input[type="number"]` directive expects.
 
 
 <example module="numfmt-error-module" name="number-format-error">

src/ng/directive/input.js

@@ -1034,6 +1034,28 @@ var inputType = {
    * @description
    * Native range input with validation and transformation.
    *
+   * <div class="alert alert-warning">
+   *   <p>
+   *     In v1.5.9+, in order to avoid interfering with already existing, custom directives for
+   *     `input[range]`, you need to let Angular know that you want to enable its built-in support.
+   *     You can do this by adding the `ng-input-range` attribute to the input element. E.g.:
+   *     `<input type="range" ng-input-range ... />`
+   *   </p><br />
+   *   <p>
+   *     Input elements without the `ng-input-range` attibute will continue to be treated the same
+   *     as in previous versions (e.g. their model value will be a string not a number and Angular
+   *     will not take `min`/`max`/`step` attributes and properties into account).
+   *   </p><br />
+   *   <p>
+   *     **Note:** From v1.6.x onwards, the support for `input[range]` will be always enabled and
+   *     the `ng-input-range` attribute will have no effect.
+   *   </p><br />
+   *   <p>
+   *     This documentation page refers to elements which have the built-in support enabled; i.e.
+   *     elements _with_ the `ng-input-range` attribute.
+   *   </p>
+   * </div>
+   *
    * The model for the range input must always be a `Number`.
    *
    * IE9 and other browsers that do not support the `range` type fall back
@@ -1055,7 +1077,7 @@ var inputType = {
    *
    * Since the element value should always reflect the current model value, a range input
    * will set the bound ngModel expression to the value that the browser has set for the
-   * input element. For example, in the following input `<input type="range" ng-model="model.value">`,
+   * input element. For example, in the following input `<input type="range" ng-input-range ng-model="model.value">`,
    * if the application sets `model.value = null`, the browser will set the input to `'50'`.
    * Angular will then set the model to `50`, to prevent input and model value being out of sync.
    *
@@ -1074,10 +1096,12 @@ var inputType = {
    * instead may set the `stepMismatch` error. If that's the case, the Angular will set the `step`
    * error on the input, and set the model to `undefined`.
    *
-   * Note that `input[range]` is not compatible with`ngMax`, `ngMin`, and `ngStep`, because they do
+   * Note that `input[range]` is not compatible with `ngMax`, `ngMin`, and `ngStep`, because they do
    * not set the `min` and `max` attributes, which means that the browser won't automatically adjust
    * the input value based on their values, and will always assume min = 0, max = 100, and step = 1.
    *
+   * @param           ngInputRange The presense of this attribute enables the built-in support for
+   *                  `input[range]`.
    * @param {string}  ngModel Assignable angular expression to data-bind to.
    * @param {string=} name Property name of the form under which the control is published.
    * @param {string=} min Sets the `min` validation to ensure that the value entered is greater
@@ -1102,7 +1126,7 @@ var inputType = {
           </script>
           <form name="myForm" ng-controller="ExampleController">
 
-            Model as range: <input type="range" name="range" ng-model="value" min="{{min}}"  max="{{max}}">
+            Model as range: <input type="range" ng-input-range name="range" ng-model="value" min="{{min}}"  max="{{max}}">
             <hr>
             Model as number: <input type="number" ng-model="value"><br>
             Min: <input type="number" ng-model="min"><br>
@@ -1128,7 +1152,7 @@ var inputType = {
               }]);
           </script>
           <form name="myForm" ng-controller="ExampleController">
-            Model as range: <input type="range" name="range" ng-model="value" ng-min="min" ng-max="max">
+            Model as range: <input type="range" ng-input-range name="range" ng-model="value" ng-min="min" ng-max="max">
             <hr>
             Model as number: <input type="number" ng-model="value"><br>
             Min: <input type="number" ng-model="min"><br>
@@ -1521,8 +1545,8 @@ function parseNumberAttrVal(val) {
 
 function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
   badInputChecker(scope, element, attr, ctrl);
-  numberFormatterParser(ctrl);
   baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
+  numberFormatterParser(ctrl);
 
   if (isDefined(attr.min) || attr.ngMin) {
     var minVal;
@@ -1971,7 +1995,11 @@ var inputDirective = ['$browser', '$sniffer', '$filter', '$parse',
     link: {
       pre: function(scope, element, attr, ctrls) {
         if (ctrls[0]) {
-          (inputType[lowercase(attr.type)] || inputType.text)(scope, element, attr, ctrls[0], $sniffer,
+          var type = lowercase(attr.type);
+          if ((type === 'range') && !attr.hasOwnProperty('ngInputRange')) {
+            type = 'text';
+          }
+          (inputType[type] || inputType.text)(scope, element, attr, ctrls[0], $sniffer,
                                                               $browser, $filter, $parse);
         }
       }

test/ng/directive/inputSpec.js

@@ -2801,6 +2801,26 @@ describe('input', function() {
       scope = $rootScope;
     });
 
+    it('should be treated as `input[text]` without the `ng-input-range` attribute', function() {
+      var inputElm = helper.compileInput('<input type="range" ng-model="age" />');
+      var ngModel = inputElm.controller('ngModel');
+
+      helper.changeInputValueTo(25);
+
+      expect(scope.age).toBe('25');
+      expect(ngModel.$$parserName).toBeUndefined();
+    });
+
+    it('should not be treated as `input[text]` with the `ng-input-range` attribute', function() {
+      var inputElm = helper.compileInput('<input type="range" ng-model="age" ng-input-range />');
+      var ngModel = inputElm.controller('ngModel');
+
+      helper.changeInputValueTo('25');
+
+      expect(scope.age).toBe(25);
+      expect(ngModel.$$parserName).toBe('number');
+    });
+
     if (supportsRange) {
       // This behavior only applies to browsers that implement the range input, which do not
       // allow to set a non-number value and will set the value of the input to 50 even when you
@@ -2809,7 +2829,7 @@ describe('input', function() {
       // sense if the input value is a string. These browsers will mark the input as invalid instead.
 
       it('should render as 50 if null', function() {
-        var inputElm = helper.compileInput('<input type="range" ng-model="age" />');
+        var inputElm = compileRangeInput('ng-model="age"');
 
         helper.changeInputValueTo('25');
         expect(scope.age).toBe(25);
@@ -2820,7 +2840,7 @@ describe('input', 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" />');
+        var inputElm = compileRangeInput('ng-model="age"');
 
         expect(inputElm.val()).toBe('50');
 
@@ -2830,7 +2850,7 @@ describe('input', function() {
       });
 
       it('should parse non-number values to 50 when default min/max', function() {
-        var inputElm = helper.compileInput('<input type="range" ng-model="age" />');
+        var inputElm = compileRangeInput('ng-model="age"');
 
         scope.$apply('age = 10');
         expect(inputElm.val()).toBe('10');
@@ -2843,7 +2863,7 @@ describe('input', function() {
     } else {
 
       it('should reset the model if view is invalid', function() {
-        var inputElm = helper.compileInput('<input type="range" ng-model="age"/>');
+        var inputElm = compileRangeInput('ng-model="age"');
 
         scope.$apply('age = 100');
         expect(inputElm.val()).toBe('100');
@@ -2856,7 +2876,7 @@ describe('input', function() {
     }
 
     it('should parse the input value to a Number', function() {
-      var inputElm = helper.compileInput('<input type="range" ng-model="age" />');
+      var inputElm = compileRangeInput('ng-model="age"');
 
       helper.changeInputValueTo('75');
       expect(scope.age).toBe(75);
@@ -2866,7 +2886,7 @@ describe('input', function() {
     it('should only invalidate the model if suffering from bad input when the data is parsed', function() {
       scope.age = 60;
 
-      var inputElm = helper.compileInput('<input type="range" ng-model="age" />', {
+      var inputElm = compileRangeInput('ng-model="age"', {
         valid: false,
         badInput: true
       });
@@ -2883,7 +2903,7 @@ describe('input', function() {
     it('should throw if the model value is not a number', function() {
       expect(function() {
         scope.value = 'one';
-        var inputElm = helper.compileInput('<input type="range" ng-model="value" />');
+        var inputElm = compileRangeInput('ng-model="value"');
       }).toThrowMinErr('ngModel', 'numfmt', 'Expected `one` to be a number');
     });
 
@@ -2895,7 +2915,7 @@ describe('input', function() {
         it('should initialize correctly with non-default model and min value', function() {
           scope.value = -3;
           scope.min = -5;
-          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" min="{{min}}" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" min="{{min}}"');
 
           expect(inputElm).toBeValid();
           expect(inputElm.val()).toBe('-3');
@@ -2905,7 +2925,7 @@ describe('input', function() {
 
         // Browsers that implement range will never allow you to set the value < min values
         it('should adjust invalid input values', function() {
-          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" min="10" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" min="10"');
 
           helper.changeInputValueTo('5');
           expect(inputElm).toBeValid();
@@ -2921,7 +2941,7 @@ describe('input', function() {
         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}}" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" min="{{min}}"');
 
           expect(inputElm).toBeValid();
           expect(inputElm.val()).toBe('0');
@@ -2936,7 +2956,7 @@ describe('input', function() {
 
         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}}" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" min="{{min}}"');
 
           helper.changeInputValueTo('15');
           expect(inputElm).toBeValid();
@@ -2970,7 +2990,7 @@ describe('input', function() {
         // input[type=range] will become type=text in browsers that don't support it
 
         it('should validate if "range" is not implemented', function() {
-          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" min="10" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" min="10"');
 
           helper.changeInputValueTo('5');
           expect(inputElm).toBeInvalid();
@@ -2985,7 +3005,7 @@ describe('input', function() {
 
         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}}" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" min="{{min}}"');
 
           expect(inputElm).toBeValid();
           expect(inputElm.val()).toBe('-10');
@@ -3013,7 +3033,7 @@ describe('input', function() {
 
         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}}" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" min="{{min}}"');
 
           helper.changeInputValueTo('15');
           expect(inputElm).toBeValid();
@@ -3054,7 +3074,7 @@ describe('input', function() {
         it('should initialize correctly with non-default model and max value', function() {
           scope.value = 130;
           scope.max = 150;
-          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" max="{{max}}" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" max="{{max}}"');
 
           expect(inputElm).toBeValid();
           expect(inputElm.val()).toBe('130');
@@ -3063,7 +3083,7 @@ describe('input', function() {
         });
 
         it('should validate', function() {
-          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" max="10" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" max="10"');
 
           helper.changeInputValueTo('20');
           expect(inputElm).toBeValid();
@@ -3079,7 +3099,7 @@ describe('input', function() {
         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}}" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" max="{{max}}"');
 
           expect(inputElm).toBeValid();
           expect(inputElm.val()).toBe('100');
@@ -3094,7 +3114,7 @@ describe('input', function() {
 
         it('should adjust the element and model value 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}}" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" max="{{max}}"');
 
           helper.changeInputValueTo('5');
           expect(inputElm).toBeValid();
@@ -3126,7 +3146,7 @@ describe('input', function() {
 
       } else {
         it('should validate if "range" is not implemented', function() {
-          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" max="10" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" max="10"');
 
           helper.changeInputValueTo('20');
           expect(inputElm).toBeInvalid();
@@ -3141,7 +3161,7 @@ describe('input', function() {
 
         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}}" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" max="{{max}}"');
 
           expect(inputElm).toBeValid();
           expect(inputElm.val()).toBe('120');
@@ -3169,7 +3189,7 @@ describe('input', function() {
 
         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}}" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" max="{{max}}"');
 
           helper.changeInputValueTo('5');
           expect(inputElm).toBeValid();
@@ -3209,15 +3229,15 @@ describe('input', 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}}" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" max="{{max}}" min="{{min}}"');
 
           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}}" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" max="{{max}}" min="{{min}}"');
 
           expect(inputElm.val()).toBe('70');
           expect(scope.value).toBe(70);
@@ -3240,7 +3260,7 @@ describe('input', function() {
         // However, currently only Firefox fully inplements the spec when setting the value after the step value changes.
         // Other browsers fail in various edge cases, which is why they are not tested here.
         it('should round the input value to the nearest step on user input', function() {
-          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" step="5" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" step="5"');
 
           helper.changeInputValueTo('5');
           expect(inputElm).toBeValid();
@@ -3269,7 +3289,7 @@ describe('input', function() {
         });
 
         it('should round the input value to the nearest step when setting the model', function() {
-          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" step="5" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" step="5"');
 
           scope.$apply('value = 10');
           expect(inputElm.val()).toBe('10');
@@ -3306,7 +3326,7 @@ describe('input', function() {
         it('should validate if "range" is not implemented', function() {
           scope.step = 10;
           scope.value = 20;
-          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" step="{{step}}" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" step="{{step}}"');
 
           expect(inputElm.val()).toBe('20');
           expect(inputElm).toBeValid();
@@ -3334,7 +3354,7 @@ describe('input', function() {
 
         it('should validate even if the step value changes on-the-fly', function() {
           scope.step = 10;
-          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" step="{{step}}" />');
+          var inputElm = compileRangeInput('ng-model="value" name="alias" step="{{step}}"');
 
           helper.changeInputValueTo('10');
           expect(inputElm).toBeValid();
@@ -3377,6 +3397,11 @@ describe('input', function() {
         });
       }
     });
+
+    // Helpers
+    function compileRangeInput(attrs, opts) {
+      return helper.compileInput('<input type="range" ng-input-range ' + attrs + ' />', opts);
+    }
   });
 
   describe('email', function() {