wip: use native max min validators

Author: Narretz

src/ng/directive/input.js

@@ -1485,7 +1485,10 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
   badInputChecker(scope, element, attr, ctrl);
   baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
 
-  var minVal = 0, maxVal = 100;
+  var minVal = 0,
+      maxVal = 100,
+      hasNativeValidation = ctrl.$$hasNativeValidators && element[0].validity,
+      validity = element[0].validity;
 
   ctrl.$$parserName = 'number';
   ctrl.$parsers.push(function(value) {
@@ -1514,10 +1517,15 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
   }
 
   if (isDefined(attr.min) || attr.ngMin) {
-    ctrl.$validators.min = function(value) {
-      return ctrl.$isEmpty(value) || isUndefined(minVal) || value >= minVal;
-    };
+    ctrl.$validators.min = hasNativeValidation && isDefined(validity.rangeUnderflow) ?
+      function nativeMaxValidator(value) {
+        return !element[0].validity.rangeOverflow;
+      } :
+      function maxValidator(modelValue, viewValue) {
+        return ctrl.$isEmpty(viewValue) || isUndefined(maxVal) || viewValue >= minVal;
+      };
 
+    // Assign minVal when the directive is linked. This won't $validate as the model isn't ready yet
     minChange(attr.min);
     attr.$observe('min', minChange);
   }
@@ -1532,40 +1540,46 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
   }
 
   if (isDefined(attr.max) || attr.ngMax) {
-    ctrl.$validators.max = ctrl.$$hasNativeValidators && isObject(element[0].validity) ?
-      function(value) {
+    ctrl.$validators.max = hasNativeValidation && isDefined(validity.rangeOverflow)?
+      function nativeMaxValidator(value) {
         return !element[0].validity.rangeOverflow;
       } :
-      function(modelValue, viewValue) {
+      function maxValidator(modelValue, viewValue) {
         return ctrl.$isEmpty(viewValue) || isUndefined(maxVal) || viewValue <= maxVal;
       };
 
     console.log('max initial', attr.max);
+    // Assign maxVal when the directive is linked. This won't $validate as the model isn't ready yet
     maxChange(attr.max);
     attr.$observe('max', maxChange);
   }
 
   var originalRender = ctrl.$render;
 
-  ctrl.$render = function() {
-    if (ctrl.$isEmpty(ctrl.$viewValue)) {
-      // Browsers that implement range do this automatically, but IE9 does not
-      var viewValue = minVal + (maxVal - minVal) / 2;
-      ctrl.$viewValue = viewValue;
-      originalRender();
-      ctrl.$setViewValue(viewValue);
-    } else if (ctrl.$viewValue > maxVal) {
-      ctrl.$viewValue = maxVal;
-      originalRender();
-      ctrl.$setViewValue(ctrl.$viewValue);
-    } else if (ctrl.$viewValue < minVal) {
-      ctrl.$viewValue = minVal;
-      originalRender();
-      ctrl.$setViewValue(ctrl.$viewValue);
-    } else {
-      originalRender();
-    }
-  };
+  ctrl.$render = hasNativeValidation && 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() {
+      console.log('rangeRendr');
+      if (ctrl.$isEmpty(ctrl.$viewValue)) {
+        var viewValue = minVal + (maxVal - minVal) / 2;
+        ctrl.$viewValue = viewValue;
+        originalRender();
+        ctrl.$setViewValue(viewValue);
+        console.log('elval', element.val());
+      } else if (ctrl.$viewValue > maxVal) {
+        ctrl.$viewValue = maxVal;
+        originalRender();
+        ctrl.$setViewValue(ctrl.$viewValue);
+      } else if (ctrl.$viewValue < minVal) {
+        ctrl.$viewValue = minVal;
+        originalRender();
+        ctrl.$setViewValue(ctrl.$viewValue);
+      } else {
+        originalRender();
+      }
+    } :
+    originalRender;
 
 }