<md-input-container flex>
<label>{{'COMMON.AMOUNT' | translate }}</label>
<input class="margin-top-2" id="depositpaidamount" enterastab name="disabledamount" type="number" ng-model="deposit.paidamount" ng-disabled="true" />
</md-input-container>This field allows to enter decimal also. But i want to enter only integer.
You need to add a check in JavaScript Controller for this if entered value is a integer or not.
Below is working code:
var invalidChars = ["-","+","e","."];
depositpaidamount.addEventListener("keydown", function(e) {
if (invalidChars.includes(e.key)) {
e.preventDefault();
}
});<md-input-container flex>
<label>{{'COMMON.AMOUNT' | translate }}</label>
<input class="margin-top-2" id="depositpaidamount" enterastab name="disabledamount" type="number" ng-model="deposit.paidamount" ng-disabled="true" />
</md-input-container>
use onkeypress event in your input box
<input type="text" onkeypress='return (event.charCode >= 48 && event.charCode <= 57) || event.charCode <= 31'>
dot which should not be.
onpaste="return false" is not good option. What if user want to paste a valid integer?Use Directive
app.directive('restrictTo', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var re = RegExp(attrs.restrictTo);
var exclude = /Backspace|Enter|Tab|Delete|Del|ArrowUp|Up|ArrowDown|Down|ArrowLeft|Left|ArrowRight|Right/;
element[0].addEventListener('keydown', function (event) {
if (!exclude.test(event.key) && !re.test(event.key)) {
event.preventDefault();
}
});
}
}
});
And In HTML we use following way:
<input type="text" restrict-to="[0-9]"/>
See the Plunker Example HERE.. Visit: https://plnkr.co/edit/PVjVgKOqZWojDJUYxKt4?p=preview
If useful to you please mark it as answer.