fix(input[type=range]): set model to 50 if input value defaults to 50

When the model value is undefined or null, browsers that fully implement range will set its value to 50. This causes a mismatch between the model and the view. It also means that the input cannot be "empty", that means it will never show up as required because it always has a value. This is obviously problematic if the application that won't be able to distinguish between a null value and the default value of 50.

This commit sets the model to 50 after a call to $render detects that the value to be set was empty. This is done via $setViewValue, so parser and validators run.

It also means that when the range model is also bound to a number input, this input can never be cleared, as clearing it will trigger the reset to 50 in the range input.

Author: Narretz

src/ng/directive/input.js

@@ -1092,7 +1092,7 @@ var inputType = {
         </file>
       </example>
    */
-  'range': numberInputType,
+  'range': rangeInputType,
 
   /**
    * @ngdoc input
@@ -1498,6 +1498,24 @@ function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
   }
 }
 
+function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
+  numberInputType(scope, element, attr, ctrl, $sniffer, $browser);
+
+  var originalRender = ctrl.$render;
+
+  ctrl.$render = function() {
+    console.log('custom render', ctrl.$viewValue, ctrl.$isEmpty(ctrl.$viewValue));
+    if (ctrl.$isEmpty(ctrl.$viewValue)) {
+      ctrl.$viewValue = '50';
+      originalRender();
+      ctrl.$setViewValue('50');
+    } else {
+      originalRender();
+    }
+  };
+
+}
+
 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

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

test/ng/directive/inputSpec.js

@@ -2825,7 +2825,7 @@ describe('input', function() {
 
     beforeEach(function() {
       scope = $rootScope;
-    })
+    });
 
     it('should reset the model if view is invalid', function() {
       var inputElm = helper.compileInput('<input type="range" ng-model="age"/>');
@@ -2852,40 +2852,45 @@ describe('input', function() {
 
       scope.$apply('age = null');
 
-      expect(scope.age).toBeNull();
       expect(inputElm.val()).toEqual('50');
     });
 
-    it('should come up as 50 when no value specified', function() {
+    it('should set model to 50 when no value specified', function() {
       var inputElm = helper.compileInput('<input type="range" ng-model="age" />');
 
       expect(inputElm.val()).toBe('50');
 
       scope.$apply('age = null');
 
-      expect(scope.age).toBeNull();
-      expect(inputElm.val()).toBe('50');
+      expect(scope.age).toBe(50);
     });
 
+    if (msie !== 9) {
+      // 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
+      // change it directly on the element.
+      // Other browsers fall back to text inputs, where setting a model value of 50 does not make
+      // sense if the input value is a string. These browser will mark the input as invalid instead.
+      it('should parse non-number values to 50', function() {
+        var inputElm = helper.compileInput('<input type="range" ng-model="age" />');
 
-    it('should parse empty string to 50', function() {
-      var inputElm = helper.compileInput('<input type="range" ng-model="age" />');
-
-      scope.$apply('age = 10');
-
-      helper.changeInputValueTo('');
-      expect(scope.age).toBe(50);
-      expect(inputElm).toBeValid();
-    });
+        scope.$apply('age = 10');
+        expect(inputElm.val()).toBe('10');
 
+        helper.changeInputValueTo('');
+        expect(scope.age).toBe(50);
+        expect(inputElm).toBeValid();
+      });
+    }
 
     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" />', {
         valid: false,
         badInput: true
       });
 
-      expect(scope.age).toBeUndefined();
       expect(inputElm).toBeValid();
 
       helper.changeInputValueTo('this-will-fail-because-of-the-badInput-flag');