feat(input[range]): support step

Author: Narretz

src/jqLite.js

@@ -577,7 +577,8 @@ var ALIASED_ATTR = {
   'ngMaxlength': 'maxlength',
   'ngMin': 'min',
   'ngMax': 'max',
-  'ngPattern': 'pattern'
+  'ngPattern': 'pattern',
+  'ngStep': 'step'
 };
 
 function getBooleanAttrName(element, name) {

src/ng/directive/input.js

@@ -1556,6 +1556,10 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
 
   var minVal = 0,
       maxVal = 100,
+      stepVal = 1,
+      minAttrType = isDefined(attr.ngMin) ? 'ngMin' : isDefined(attr.min) ? 'min' : false,
+      maxAttrType = isDefined(attr.ngMax) ? 'ngMax' : isDefined(attr.max) ? 'max' : false,
+      stepAttributeType = isDefined(attr.ngStep) ? 'ngStep' : isDefined(attr.step) ? 'step' : false,
       supportsRange = ctrl.$$hasNativeValidators && element[0].type === 'range',
       validity = element[0].validity;
 
@@ -1570,33 +1574,8 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
     } :
     originalRender;
 
-  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 (isNumber(ctrl.$modelValue) && isNaN(ctrl.$modelValue)) {
-      return;
-    }
-
-    if (supportsRange && minAttrType === 'min') {
-      var elVal = element.val();
-      // IE11 doesn't set the el val correctly if the minVal is greater than the element value
-      if (minVal > elVal) {
-        element.val(minVal);
-        elVal = minVal;
-      }
-      ctrl.$setViewValue(elVal);
-    } else {
-      // TODO(matsko): implement validateLater to reduce number of validations
-      ctrl.$validate();
-    }
-  }
-
-  var minAttrType = isDefined(attr.ngMin) ? 'ngMin' : isDefined(attr.min) ? 'min' : false;
   if (minAttrType) {
-    ctrl.$validators.min = isDefined(attr.min) && supportsRange ?
+    ctrl.$validators.min = minAttrType === 'min' && supportsRange ?
       function noopMinValidator(value) {
         // Since all browsers set the input to a valid value, we don't need to check validity
         return true;
@@ -1609,34 +1588,34 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
     // 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;
-    // ignore changes before model is initialized
-    if (isNumber(ctrl.$modelValue) && isNaN(ctrl.$modelValue)) {
-      return;
-    }
+    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 (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
-      if (maxVal < elVal) {
-        element.val(maxVal);
-        elVal = minVal;
+      if (supportsRange && minAttrType === 'min') {
+        var elVal = element.val();
+        // IE11 doesn't set the el val correctly if the minVal is greater than the element value
+        if (minVal > elVal) {
+          element.val(minVal);
+          elVal = minVal;
+        }
+        ctrl.$setViewValue(elVal);
+      } else {
+        // TODO(matsko): implement validateLater to reduce number of validations
+        ctrl.$validate();
       }
-      ctrl.$setViewValue(elVal);
-    } else {
-      // TODO(matsko): implement validateLater to reduce number of validations
-      ctrl.$validate();
     }
   }
-  var maxAttrType = isDefined(attr.max) ? 'max' : attr.ngMax ? 'ngMax' : false;
+
   if (maxAttrType) {
-    ctrl.$validators.max = isDefined(attr.max) && supportsRange ?
+    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;
@@ -1649,8 +1628,66 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
     // 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);
+
+    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 (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
+        if (maxVal < elVal) {
+          element.val(maxVal);
+          elVal = minVal;
+        }
+        ctrl.$setViewValue(elVal);
+      } else {
+        // TODO(matsko): implement validateLater to reduce number of validations
+        ctrl.$validate();
+      }
+    }
   }
 
+  if (stepAttributeType) {
+    ctrl.$validators.step = stepAttributeType === 'step' && supportsRange ?
+      function noopStepValidator() {
+        // Since all browsers set the input to a valid value, we don't need to check validity
+        return true;
+      } :
+      // ngStep doesn't set the setp attr, so the browser doesn't adjust the input value as setting step would
+      function stepValidator(modelValue, viewValue) {
+        console.log('StepValidator', viewValue, stepVal, viewValue % stepVal)
+        return ctrl.$isEmpty(viewValue) || isUndefined(stepVal) || viewValue % stepVal === 0;
+      };
+
+    // Assign stepVal when the directive is linked. This won't run the validators as the model isn't ready yet
+    stepChange(attr.step);
+    attr.$observe('step', stepChange);
+
+    function stepChange(val) {
+      if (isDefined(val) && !isNumber(val)) {
+        val = parseFloat(val);
+      }
+      stepVal = isNumber(val) && !isNaN(val) ? val : undefined;
+      // ignore changes before model is initialized
+      if (isNumber(ctrl.$modelValue) && isNaN(ctrl.$modelValue)) {
+        return;
+      }
+
+      if (supportsRange && stepAttributeType === 'step') {
+        ctrl.$setViewValue(element.val());
+      } else {
+        // TODO(matsko): implement validateLater to reduce number of validations
+        ctrl.$validate();
+      }
+    }
+  }
 }
 
 function urlInputType(scope, element, attr, ctrl, $sniffer, $browser) {