Angular2 input type number, no decimal value

Question

I've been wondering, what is the proper approach in preventing decimals from being entered in number inputs for angular2.

Is there a certain event or constraint I can add? When I for example just use pattern or such it will only invalidate the field but still allow typing.

What would be the proper way to prevent this, just ye olde, keyUp event and checking keystroke?

Since according to comments, asking for patterns or w/e is wrong, here is what I now implemented and works like a charm

<input (keypress)="preventInput($event)" type="number" step="1">

with preventInput as:

private preventInput(event) {
  console.log(event.keyCode);
  switch(event.keyCode) {
    case 101: //e
    case 46: //.
      event.preventDefault();
      break;
  }
}

this won't however prevent input of . by pasting but is good enough for us.

As I already stated in my OP that would still allow entering the value, I want to prevent this. — Mathijs Segers
– Mathijs Segers, Commented May 24, 2016 at 6:06
Well in that case, you need to show us what you have tried as you failed to do so... "You have tried" does not mean "you have tries it in right way" — Rayon
– Rayon, Commented May 24, 2016 at 6:08
No, I'm asking for the way to go, I can easily slap in something to make it work for me. I was asking for advice on a best practice. There is no "trying" good practices. Either you follow one or you don't and if you don't know which exist you will never. As far as I know you're not always required to have a unsolvable problem. As for now I'll do a (keyUp) and check the event key. Thanks for trying though. — Mathijs Segers
– Mathijs Segers, Commented May 24, 2016 at 6:24

nikk wong · Accepted Answer · 2016-05-24 06:50:04Z

1

In angular 2 this is very similar to angular1. The takeaway is that it is preferable to keep the logic running within angular because you can trigger/react to other angular events based on the current event, if you ever needed to do so, or if the logic in this class ever was to grow.

The syntax is different but the logic is very much the same—creating a directive that listens to keystrokes.

@Directive({
   selector: 'prevent-input',
   template: `<input type="text" (keypress)="preventKeyStrokes($event)">`
})

export class PreventInput {
   constructor() {}
   preventKeyStrokes(event) {
          event.preventDefault();    
          event = event || window.event;
          var key = event.keyCode || event.which;
          key = String.fromCharCode(key);
          var strToTest = '.';
          if (/* some regex with '.' */.test(key)) {
              return false;
          }
    } 
}

$event is a DOM Keyboard event. Let me know if I can be of any more help.

answered May 24, 2016 at 6:50

nikk wong

8,8386 gold badges60 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mathijs Segers Over a year ago

Thanks for adding it in Typescript as well.

hgoebl Over a year ago

IMO not practical. Should be done with @HostListener and without a template.

nikk wong · Accepted Answer · 2016-05-24 06:17:38Z

1

I've usually seen it done via custom directives. This is preferable to vanilla JS because you can use the scope object to listen into the key events if you want to bind some other angular logic into the event now or in the future.

angular.directive('preventSomeKeystrokes', function () {
    link(scope, elem, attrs) {
       elem.on('keydown', function (event) {
          event.preventDefault();    
          event = event || window.event;
          // maybe prevent certain keys dynamically with $scope?
          // or see how often your users are typing in '.'s with angular.$log().
          var key = _event.keyCode || _event.which;
          key = String.fromCharCode(key);
          var strToTest = '.';
          if (/* some regex with '.' */.test(key)) {
              return false;
          }
      }
});

edited May 24, 2016 at 6:17

answered May 24, 2016 at 6:12

nikk wong

8,8386 gold badges60 silver badges73 bronze badges

2 Comments

Mathijs Segers Over a year ago

This looks like angular (1.x) to me I asked for angular2 :-) But I guess I can use those kind of bindings

nikk wong Over a year ago

You didn't specify that it was an angular2 question. I'll prep an answer for that :-D

Collectives™ on Stack Overflow

Angular2 input type number, no decimal value

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related