Question

我一直想知道，阻止在angular2的数字输入中输入小数的正确方法是什么。

我可以添加某个事件或约束吗？例如，当我使用模式等时，它只会使字段无效但仍允许输入。

什么是正确的方法来防止这种情况，只是你们，keyUp事件和检查击键？

因为根据评论，询问模式或w / e是错误的，这是我现在实现的并且像魅力一样工作

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

使用preventInput：

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

然而，这不会阻止输入。通过粘贴，但对我们来说已经足够了。

Answer 1

我经常看到它是通过自定义指令完成的。这比vanilla JS更好，因为如果你想现在或将来将一些其他角度逻辑绑定到事件中，你可以使用scope对象来监听关键事件。

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

在角度2中，这与angular1非常相似。需要注意的是，最好保持逻辑在角度内运行，因为你可以根据当前事件触发/响应其他角度事件，如果你需要这样做，或者这个类中的逻辑是否会增长。

语法不同但逻辑非常相似 - 创建一个监听击键的指令。

@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是一个DOM键盘事件。如果我能提供更多帮助，请告诉我。

Angular2输入类型编号，无小数值

2 个答案: