AngularJS: allow numbers only as input

Question

I need an input field that allows (and display) only numeric character as input. I need that this value will be integer so neither '.' character is allowed. How to do this in angularjs? If possible, how also display only numbers if a string is pasted in the text field? Edit: the type=number allows the dot, I want allow only integer

you can set different html params that define only full numbers can be set. look in the html5 docs — mtizziani, Mar 19 '17 at 19:44
Possible duplicate of [How do I restrict an input to only accept numbers?](http://stackoverflow.com/questions/14615236/how-do-i-restrict-an-input-to-only-accept-numbers) — Nikolaj Dam Larsen, Mar 19 '17 at 20:01

score 3 · Accepted Answer · answered Mar 20 '17 at 09:22

Try this it will work as per your expectation.

var numInput = document.querySelector('input');

numInput.addEventListener('input', function(){
    var num = this.value.match(/^\d+$/);
    if (num === null) {
      this.value = "";
    }
});

<input type="number" min="0" step="1"/>

score 1 · Answer 2 · answered Mar 19 '17 at 19:53

Look at <input type="number"> https://www.w3schools.com/html/html_form_input_types.asp

Otherwise you need to create your own logic to handle user input. In case you don't want to use HTML5 input then here is my suggestion.

In your angular2 component, create

<input [ngModel]="your_variable` (ngModelChange)="changeEvent($event)") />

changeEvent = (event) => {
//logic to handle different formats of your_variable
}

score 1 · Answer 3 · answered Jul 31 '17 at 09:25

1

You can use ng-pattern="/^[0-9]{1,}$/" and Input type "text" to allow only numbers.

answered Jul 31 '17 at 09:25

RaviSoni-Systematix

99
6

Mohamed Abbas · Answer 4 · 2017-03-19T19:59:19.563

0

You can do it simply with HTML without using any angular methods, like this

<input type="number" min="0" step="1"/>

Another method using also HTML is to use pattern attribute

<input type="text" pattern="\d*" />

edited Mar 19 '17 at 19:59

answered Mar 19 '17 at 19:51

Mohamed Abbas

2,228
1
11
19

@mtizziani It isn't correct - it doesn't work in older browsers, or even in Edge. – Bob Tway Dec 05 '18 at 10:30
@MattThrower correctly, IE 8 does not support HTML5 ;) but the fallback if not supported ist input type text – mtizziani Dec 05 '18 at 11:20

score 0 · Answer 5 · answered Mar 20 '17 at 09:15

0

You can use ng-pattern="/^[0-9]\d*$/" for that textbox but type should be text for that and You can also use below code for check only for number.

<input type="number" min="0"/>

answered Mar 20 '17 at 09:15

RaviSoni-Systematix

99
6

score 0 · Answer 6 · answered Sep 28 '20 at 10:22

**Directive: (with input type=text)**

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>

AngularJS: allow numbers only as input

6 Answers6