Skip to content

Commit 198fbff

Browse files
revert: feat(input[range]): support step
This reverts commit 90c08b8
1 parent 7eb0256 commit 198fbff

File tree

2 files changed

+28
-297
lines changed

2 files changed

+28
-297
lines changed

src/ng/directive/input.js

Lines changed: 27 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1059,19 +1059,13 @@ var inputType = {
10591059
* The model for the range input must always be a `Number`.
10601060
*
10611061
* IE9 and other browsers that do not support the `range` type fall back
1062-
* to a text input without any default values for `min`, `max` and `step`. Model binding,
1063-
* validation and number parsing are nevertheless supported.
1062+
* to a text input. Model binding, validation and number parsing are nevertheless supported.
10641063
*
10651064
* Browsers that support range (latest Chrome, Safari, Firefox, Edge) treat `input[range]`
10661065
* in a way that never allows the input to hold an invalid value. That means:
10671066
* - any non-numerical value is set to `(max + min) / 2`.
10681067
* - any numerical value that is less than the current min val, or greater than the current max val
10691068
* is set to the min / max val respectively.
1070-
* - additionally, the current `step` is respected, so the nearest value that satisfies a step
1071-
* is used.
1072-
*
1073-
* See the [HTML Spec on input[type=range]](https://www.w3.org/TR/html5/forms.html#range-state-(type=range))
1074-
* for more info.
10751069
*
10761070
* This has the following consequences for Angular:
10771071
*
@@ -1084,21 +1078,16 @@ var inputType = {
10841078
* That means the model for range will immediately be set to `50` after `ngModel` has been
10851079
* initialized. It also means a range input can never have the required error.
10861080
*
1087-
* This does not only affect changes to the model value, but also to the values of the `min`,
1088-
* `max`, and `step` attributes. When these change in a way that will cause the browser to modify
1089-
* the input value, Angular will also update the model value.
1081+
* This does not only affect changes to the model value, but also to the values of the `min` and
1082+
* `max` attributes. When these change in a way that will cause the browser to modify the input value,
1083+
* Angular will also update the model value.
10901084
*
10911085
* Automatic value adjustment also means that a range input element can never have the `required`,
10921086
* `min`, or `max` errors.
10931087
*
1094-
* However, `step` is currently only fully implemented by Firefox. Other browsers have problems
1095-
* when the step value changes dynamically - they do not adjust the element value correctly, but
1096-
* instead may set the `stepMismatch` error. If that's the case, the Angular will set the `step`
1097-
* error on the input, and set the model to `undefined`.
1098-
*
1099-
* Note that `input[range]` is not compatible with `ngMax`, `ngMin`, and `ngStep`, because they do
1100-
* not set the `min` and `max` attributes, which means that the browser won't automatically adjust
1101-
* the input value based on their values, and will always assume min = 0, max = 100, and step = 1.
1088+
* Note that `input[range]` is not compatible with`ngMax` and `ngMin`, because they do not set the
1089+
* `min` and `max` attributes, which means that the browser won't automatically adjust the input
1090+
* value based on their values, and will always assume min = 0 and max = 100.
11021091
*
11031092
* @param ngInputRange The presense of this attribute enables the built-in support for
11041093
* `input[range]`.
@@ -1108,8 +1097,6 @@ var inputType = {
11081097
* than `min`. Can be interpolated.
11091098
* @param {string=} max Sets the `max` validation to ensure that the value entered is less than `max`.
11101099
* Can be interpolated.
1111-
* @param {string=} step Sets the `step` validation to ensure that the value entered matches the `step`
1112-
* Can be interpolated.
11131100
* @param {string=} ngChange Angular expression to be executed when the ngModel value changes due
11141101
* to user interaction with the input element.
11151102
*
@@ -1536,13 +1523,6 @@ function numberFormatterParser(ctrl) {
15361523
});
15371524
}
15381525

1539-
function parseNumberAttrVal(val) {
1540-
if (isDefined(val) && !isNumber(val)) {
1541-
val = parseFloat(val);
1542-
}
1543-
return !isNumberNaN(val) ? val : undefined;
1544-
}
1545-
15461526
function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
15471527
badInputChecker(scope, element, attr, ctrl);
15481528
baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
@@ -1557,7 +1537,10 @@ function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
15571537
};
15581538

15591539
attr.$observe('min', function(val) {
1560-
minVal = parseNumberAttrVal(val);
1540+
if (isDefined(val) && !isNumber(val)) {
1541+
val = parseFloat(val);
1542+
}
1543+
minVal = isNumber(val) && !isNaN(val) ? val : undefined;
15611544
// TODO(matsko): implement validateLater to reduce number of validations
15621545
ctrl.$validate();
15631546
});
@@ -1569,7 +1552,10 @@ function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
15691552
};
15701553

15711554
attr.$observe('max', function(val) {
1572-
maxVal = parseNumberAttrVal(val);
1555+
if (isDefined(val) && !isNumber(val)) {
1556+
val = parseFloat(val);
1557+
}
1558+
maxVal = isNumber(val) && !isNaN(val) ? val : undefined;
15731559
// TODO(matsko): implement validateLater to reduce number of validations
15741560
ctrl.$validate();
15751561
});
@@ -1584,11 +1570,9 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
15841570
var supportsRange = ctrl.$$hasNativeValidators && element[0].type === 'range',
15851571
minVal = supportsRange ? 0 : undefined,
15861572
maxVal = supportsRange ? 100 : undefined,
1587-
stepVal = supportsRange ? 1 : undefined,
15881573
validity = element[0].validity,
15891574
hasMinAttr = isDefined(attr.min),
1590-
hasMaxAttr = isDefined(attr.max),
1591-
hasStepAttr = isDefined(attr.step);
1575+
hasMaxAttr = isDefined(attr.max);
15921576

15931577
var originalRender = ctrl.$render;
15941578

@@ -1605,7 +1589,7 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
16051589
ctrl.$validators.min = supportsRange ?
16061590
// Since all browsers set the input to a valid value, we don't need to check validity
16071591
function noopMinValidator() { return true; } :
1608-
// non-support browsers validate the min val
1592+
// non-support browsers validate the range
16091593
function minValidator(modelValue, viewValue) {
16101594
return ctrl.$isEmpty(viewValue) || isUndefined(minVal) || viewValue >= minVal;
16111595
};
@@ -1617,41 +1601,28 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
16171601
ctrl.$validators.max = supportsRange ?
16181602
// Since all browsers set the input to a valid value, we don't need to check validity
16191603
function noopMaxValidator() { return true; } :
1620-
// non-support browsers validate the max val
1604+
// ngMax doesn't set the max attr, so the browser doesn't adjust the input value as setting max would
16211605
function maxValidator(modelValue, viewValue) {
16221606
return ctrl.$isEmpty(viewValue) || isUndefined(maxVal) || viewValue <= maxVal;
16231607
};
16241608

16251609
setInitialValueAndObserver('max', maxChange);
16261610
}
16271611

1628-
if (hasStepAttr) {
1629-
ctrl.$validators.step = supportsRange ?
1630-
function nativeStepValidator() {
1631-
// Currently, only FF implements the spec on step change correctly (i.e. adjusting the
1632-
// input element value to a valid value). It's possible that other browsers set the stepMismatch
1633-
// validity error instead, so we can at least report an error in that case.
1634-
return !validity.stepMismatch;
1635-
} :
1636-
// ngStep doesn't set the setp attr, so the browser doesn't adjust the input value as setting step would
1637-
function stepValidator(modelValue, viewValue) {
1638-
return ctrl.$isEmpty(viewValue) || isUndefined(stepVal) ||
1639-
isValidForStep(viewValue, minVal || 0, stepVal);
1640-
};
1641-
1642-
setInitialValueAndObserver('step', stepChange);
1643-
}
1644-
16451612
function setInitialValueAndObserver(htmlAttrName, changeFn) {
16461613
// interpolated attributes set the attribute value only after a digest, but we need the
16471614
// attribute value when the input is first rendered, so that the browser can adjust the
16481615
// input value based on the min/max value
16491616
element.attr(htmlAttrName, attr[htmlAttrName]);
1617+
16501618
attr.$observe(htmlAttrName, changeFn);
16511619
}
16521620

16531621
function minChange(val) {
1654-
minVal = parseNumberAttrVal(val);
1622+
if (isDefined(val) && !isNumber(val)) {
1623+
val = parseFloat(val);
1624+
}
1625+
minVal = isNumber(val) && !isNaN(val) ? val : undefined;
16551626
// ignore changes before model is initialized
16561627
if (isNumberNaN(ctrl.$modelValue)) {
16571628
return;
@@ -1672,7 +1643,10 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
16721643
}
16731644

16741645
function maxChange(val) {
1675-
maxVal = parseNumberAttrVal(val);
1646+
if (isDefined(val) && !isNumber(val)) {
1647+
val = parseFloat(val);
1648+
}
1649+
maxVal = isNumber(val) && !isNaN(val) ? val : undefined;
16761650
// ignore changes before model is initialized
16771651
if (isNumberNaN(ctrl.$modelValue)) {
16781652
return;
@@ -1693,21 +1667,6 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
16931667
}
16941668
}
16951669

1696-
function stepChange(val) {
1697-
stepVal = parseNumberAttrVal(val);
1698-
// ignore changes before model is initialized
1699-
if (isNumberNaN(ctrl.$modelValue)) {
1700-
return;
1701-
}
1702-
1703-
// Some browsers don't adjust the input value correctly, but set the stepMismatch error
1704-
if (supportsRange && ctrl.$viewValue !== element.val()) {
1705-
ctrl.$setViewValue(element.val());
1706-
} else {
1707-
// TODO(matsko): implement validateLater to reduce number of validations
1708-
ctrl.$validate();
1709-
}
1710-
}
17111670
}
17121671

17131672
function urlInputType(scope, element, attr, ctrl, $sniffer, $browser) {

0 commit comments

Comments
 (0)