revert:feat(input): add support for binding to input[type=range]

This reverts commit 296da4b

Author: petebacondarwin

docs/content/error/ngModel/numfmt.ngdoc

@@ -3,8 +3,7 @@
 @fullName Model is not of type `number`
 @description
 
-The `input[type="number"]` and `input[type="range"][ng-input-range]` directives require the model to
-be a `number`.
+The number input directive `<input type="number">` requires the model to be a `number`.
 
 If the model is something else, this error will be thrown.
 

src/ng/directive/input.js

@@ -1027,132 +1027,6 @@ var inputType = {
    */
   'radio': radioInputType,
 
-  /**
-   * @ngdoc input
-   * @name input[range]
-   *
-   * @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
-   * to a text input. Model binding, validation and number parsing are nevertheless supported.
-   *
-   * Browsers that support range (latest Chrome, Safari, Firefox, Edge) treat `input[range]`
-   * in a way that never allows the input to hold an invalid value. That means:
-   * - any non-numerical value is set to `(max + min) / 2`.
-   * - any numerical value that is less than the current min val, or greater than the current max val
-   * is set to the min / max val respectively.
-   *
-   * This has the following consequences for Angular:
-   *
-   * 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-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.
-   *
-   * That means the model for range will immediately be set to `50` after `ngModel` has been
-   * initialized. It also means a range input can never have the required error.
-   *
-   * This does not only affect changes to the model value, but also to the values of the `min` and
-   * `max` attributes. When these change in a way that will cause the browser to modify the input value,
-   * Angular will also update the model value.
-   *
-   * Automatic value adjustment also means that a range input element can never have the `required`,
-   * `min`, or `max` errors.
-   *
-   * Note that `input[range]` is not compatible with`ngMax` and `ngMin`, 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 and max = 100.
-   *
-   * @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
-   *                  than `min`. Can be interpolated.
-   * @param {string=} max Sets the `max` validation to ensure that the value entered is less than `max`.
-   *                  Can be interpolated.
-   * @param {string=} ngChange Angular expression to be executed when the ngModel value changes due
-   *                  to user interaction with the input element.
-   *
-   * @example
-      <example name="range-input-directive" module="rangeExample">
-        <file name="index.html">
-          <script>
-            angular.module('rangeExample', [])
-              .controller('ExampleController', ['$scope', function($scope) {
-                $scope.value = 75;
-                $scope.min = 10;
-                $scope.max = 90;
-              }]);
-          </script>
-          <form name="myForm" ng-controller="ExampleController">
-
-            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>
-            Max: <input type="number" ng-model="max"><br>
-            value = <code>{{value}}</code><br/>
-            myForm.range.$valid = <code>{{myForm.range.$valid}}</code><br/>
-            myForm.range.$error = <code>{{myForm.range.$error}}</code>
-          </form>
-        </file>
-      </example>
-
-   * ## Range Input with ngMin & ngMax attributes
-
-   * @example
-      <example name="range-input-directive-ng" module="rangeExample">
-        <file name="index.html">
-          <script>
-            angular.module('rangeExample', [])
-              .controller('ExampleController', ['$scope', function($scope) {
-                $scope.value = 75;
-                $scope.min = 10;
-                $scope.max = 90;
-              }]);
-          </script>
-          <form name="myForm" ng-controller="ExampleController">
-            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>
-            Max: <input type="number" ng-model="max"><br>
-            value = <code>{{value}}</code><br/>
-            myForm.range.$valid = <code>{{myForm.range.$valid}}</code><br/>
-            myForm.range.$error = <code>{{myForm.range.$error}}</code>
-          </form>
-        </file>
-      </example>
-
-   */
-  'range': rangeInputType,
 
   /**
    * @ngdoc input
@@ -1504,7 +1378,10 @@ function badInputChecker(scope, element, attr, ctrl) {
   }
 }
 
-function numberFormatterParser(ctrl) {
+function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
+  badInputChecker(scope, element, attr, ctrl);
+  baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
+
   ctrl.$$parserName = 'number';
   ctrl.$parsers.push(function(value) {
     if (ctrl.$isEmpty(value))      return null;
@@ -1521,17 +1398,9 @@ function numberFormatterParser(ctrl) {
     }
     return value;
   });
-}
-
-function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
-  badInputChecker(scope, element, attr, ctrl);
-  baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
-  numberFormatterParser(ctrl);
-
-  var minVal;
-  var maxVal;
 
   if (isDefined(attr.min) || attr.ngMin) {
+    var minVal;
     ctrl.$validators.min = function(value) {
       return ctrl.$isEmpty(value) || isUndefined(minVal) || value >= minVal;
     };
@@ -1547,6 +1416,7 @@ function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
   }
 
   if (isDefined(attr.max) || attr.ngMax) {
+    var maxVal;
     ctrl.$validators.max = function(value) {
       return ctrl.$isEmpty(value) || isUndefined(maxVal) || value <= maxVal;
     };
@@ -1562,113 +1432,6 @@ function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
   }
 }
 
-function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
-  badInputChecker(scope, element, attr, ctrl);
-  numberFormatterParser(ctrl);
-  baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
-
-  var supportsRange = ctrl.$$hasNativeValidators && element[0].type === 'range',
-      minVal = supportsRange ? 0 : undefined,
-      maxVal = supportsRange ? 100 : undefined,
-      validity = element[0].validity,
-      hasMinAttr = isDefined(attr.min),
-      hasMaxAttr = isDefined(attr.max);
-
-  var originalRender = ctrl.$render;
-
-  ctrl.$render = supportsRange && isDefined(validity.rangeUnderflow) && isDefined(validity.rangeOverflow) ?
-    //Browsers that implement range will set these values automatically, but reading the adjusted values after
-    //$render would cause the min / max validators to be applied with the wrong value
-    function rangeRender() {
-      originalRender();
-      ctrl.$setViewValue(element.val());
-    } :
-    originalRender;
-
-  if (hasMinAttr) {
-    ctrl.$validators.min = supportsRange ?
-      // Since all browsers set the input to a valid value, we don't need to check validity
-      function noopMinValidator() { return true; } :
-      // non-support browsers validate the range
-      function minValidator(modelValue, viewValue) {
-        return ctrl.$isEmpty(viewValue) || isUndefined(minVal) || viewValue >= minVal;
-      };
-
-    setInitialValueAndObserver('min', minChange);
-  }
-
-  if (hasMaxAttr) {
-    ctrl.$validators.max = supportsRange ?
-      // Since all browsers set the input to a valid value, we don't need to check validity
-      function noopMaxValidator() { 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('max', maxChange);
-  }
-
-  function setInitialValueAndObserver(htmlAttrName, changeFn) {
-    // interpolated attributes set the attribute value only after a digest, but we need the
-    // attribute value when the input is first rendered, so that the browser can adjust the
-    // input value based on the min/max value
-    element.attr(htmlAttrName, attr[htmlAttrName]);
-
-    attr.$observe(htmlAttrName, changeFn);
-  }
-
-  function minChange(val) {
-    if (isDefined(val) && !isNumber(val)) {
-      val = parseFloat(val);
-    }
-    minVal = isNumber(val) && !isNaN(val) ? val : undefined;
-    // ignore changes before model is initialized
-    if (isNumberNaN(ctrl.$modelValue)) {
-      return;
-    }
-
-    if (supportsRange) {
-      var elVal = element.val();
-      // IE11 doesn't set the el val correctly if the minVal is greater than the element value
-      if (minVal > elVal) {
-        elVal = minVal;
-        element.val(elVal);
-      }
-      ctrl.$setViewValue(elVal);
-    } else {
-      // TODO(matsko): implement validateLater to reduce number of validations
-      ctrl.$validate();
-    }
-  }
-
-  function maxChange(val) {
-    if (isDefined(val) && !isNumber(val)) {
-      val = parseFloat(val);
-    }
-    maxVal = isNumber(val) && !isNaN(val) ? val : undefined;
-    // ignore changes before model is initialized
-    if (isNumberNaN(ctrl.$modelValue)) {
-      return;
-    }
-
-    if (supportsRange) {
-      var elVal = element.val();
-      // 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;
-      }
-      ctrl.$setViewValue(elVal);
-    } else {
-      // TODO(matsko): implement validateLater to reduce number of validations
-      ctrl.$validate();
-    }
-  }
-
-}
-
 function urlInputType(scope, element, attr, ctrl, $sniffer, $browser) {
   // Note: no badInputChecker here by purpose as `url` is only a validation
   // in browsers, i.e. we can always read out input.value even if it is not valid!

src/ng/directive/ngModel.js

@@ -883,8 +883,7 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
         ctrl.$viewValue = ctrl.$$lastCommittedViewValue = viewValue;
         ctrl.$render();
 
-        // It is possible that model and view value have been updated during render
-        ctrl.$$runValidators(ctrl.$modelValue, ctrl.$viewValue, noop);
+        ctrl.$$runValidators(modelValue, viewValue, noop);
       }
     }