Angular2输入类型编号，无小数

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.

Answer 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;
          }
      }
});

Answer 2

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.