I wrote a custom AngularJS directive for validating percentage values.
Custom AngularJS Directive
app.directive('validatePercent', function () {
return {
restrict: 'A',
link: function ($scope, elem, attr) {
$scope.$watch(function () { return elem.val(); },
function (newVal, oldVal) {
console.log("old : ", oldVal);
console.log("new : ", newVal);
if (newVal < 0 || newVal > 100)
{
elem.val(oldVal);
}
}
);
}
};
});
Here's the HTML code snippet:
<input validate-percent ng-model="obj.progress" type="number" class="form-control" />
Note that obj.progress is an integer and the input type is set to number.
The issue arises when trying to rapidly change the input field value multiple times consecutively. Sometimes, the value goes below -1 or above 101, even though the condition in the directive is newVal < 0 || newVal > 100.
Looking for assistance in resolving this issue.
UPDATE as of Issue #1:
This problem occurs specifically when users use the mouse wheel to change values. It does not occur when incrementing or decrementing using the keyboard arrow keys.