I want to set the html input[number] <input type="number" /> to allow only integer input (not float).
Basically, the html input[number] allow '.' to be entered for float input and I don't want that.
Is there a quick way to accomplish it in AngularJS?
Here is how this can be achieved.
With input type - 'text'
Directive:
app.directive('onlyNumbers', function () {
return {
restrict: 'A',
link: function (scope, elm, attrs, ctrl) {
elm.on('keydown', function (event) {
if(event.shiftKey){event.preventDefault(); return false;}
//console.log(event.which);
if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {
// backspace, enter, escape, arrows
return true;
} else if (event.which >= 48 && event.which <= 57) {
// numbers 0 to 9
return true;
} else if (event.which >= 96 && event.which <= 105) {
// numpad number
return true;
}
// else if ([110, 190].indexOf(event.which) > -1) {
// // dot and numpad dot
// return true;
// }
else {
event.preventDefault();
return false;
}
});
}
}
});
HTML:
<input type="text" only-numbers>
With input type - 'number'
Directive:
app.directive('noFloat', function () {
return {
restrict: 'A',
link: function (scope, elm, attrs, ctrl) {
elm.on('keydown', function (event) {
if ([110, 190].indexOf(event.which) > -1) {
// dot and numpad dot
event.preventDefault();
return false;
}
else{
return true;
}
});
}
}
});
HTML:
<input type="number" step="1" no-float>
Check out the Plunker
Use pattern property:
<input type="number" ng-model="price" name="price_field" ng-pattern="/^[0-9]{1,7}$/" required>
please see the demo : https://jsfiddle.net/JBalu/vfbgrd5n/
may help.
Please find the fiddle http://jsfiddle.net/8a4sg0mo/
angular.module('myApp', []).directive('numbersOnly', function(){
return {
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl) {
modelCtrl.$parsers.push(function (inputValue) {
if (inputValue == undefined) return ''
var transformedInput = inputValue.replace(/[^0-9]/g, '');
if (transformedInput!=inputValue) {
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}
return transformedInput;
});
}
};
});
function MyCtrl($scope) {
$scope.number = ''
}
It will allow only numbers to be entered, purely done using angular js.
I have looked for this many times, I had used directives in previous projects, but have finally founded a way that angular js provides by itself and hence can get rid of directives. Take a look at this code given at this link angularJs
The code shown there is as follows :
<script>
angular.module('numberExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.example = {
value: 12
};
}]);
</script>
<form name="myForm" ng-controller="ExampleController">
<label>Number:
<input type="number" name="input" ng-model="example.value"
min="0" max="99" required>
</label>
<div role="alert">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.number">
Not valid number!</span>
</div>
<tt>value = {{example.value}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
(function () {
angular
.module('urModule').directive('numbersOnly', numbersOnly);
function numbersOnly() {
return {
require: 'ngModel',
link: function (scope, element, attr, ngModelCtrl) {
function fromUser(text) {
if (text) {
var transformedInput = text.replace(/[^0-9]/g, '');
if (transformedInput !== text) {
ngModelCtrl.$setViewValue(transformedInput);
ngModelCtrl.$render();
}
return transformedInput;
}
return undefined;
}
ngModelCtrl.$parsers.push(fromUser);
}
};
}
})();Full working Sample:Custom Directive The below works just fine
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp" ng-controller="AppCtrl">
<input type="text" allow-numbers-only />
<script>
var app = angular.module("myApp", []);
app.controller("AppCtrl", function($scope) {
$scope.title = "App"
})
app.directive("allowNumbersOnly", function() {
return {
restrict: "A",
link: function(scope, element, attrs) {
element.bind("keydown", function(event) {
if (event.keyCode == 8) {
return false;
} else if (!(event.keyCode > 47 && event.keyCode < 58) || event.shiftKey) {
event.preventDefault();
return false;
}
});
}
}
});
</script>
</body>
</html>
input[type=number] by definition only accepts integers as input. Try it out yourself. Try typing in letters and it won't allow you.
There's no need for JavaScript as it's already built in. Did you perhaps mean input[type=text]?
You can accomplish that via angular directives. It would look something like this (not sure about my syntax though)
app.directive('onlyNumbers', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind("keydown", function(event) {
if ((event.keyCode > 47 && event.keyCode < 58) && !event.shiftKey) {
event.preventDefault();
return false;
}
});
}
});
The syntax might have a few errors, but I will break down the basic formula.
Since we are working with an input element, it makes sense that we use an attribute directive. We can do this, by setting the restrict property to A.
Since we will be listening for keypress events, we should use the link function. We want to listen for the keydown event, to detect when a key is starting to be pressed.
To find if the user typed a number, we will use keyCodes, for which the number keys are 48 through 57 representing 0 through 9 respectively. However, we didn't account for special characters, which require hitting the number keys. So we make sure the shift key isn't being pressed either.
Then we can add this directive as an attribute on our input element.
<input type="text" only-numbers />
