Angular2输入类型号，无十进制值答案

【问题标题】：Angular2 input type number, no decimal valueAngular2输入类型号，无十进制值
【发布时间】：2016-09-21 04:39:44
【问题描述】：

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

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

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

由于根据 cmets 的说法，要求模式或 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;
  }
}

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

【问题讨论】：

ngPattern 怎么样？
正如我在我的 OP 中已经说过的仍然允许输入值，我想防止这种情况发生。
那么在这种情况下，您需要向我们展示您尝试过的内容，因为您没有这样做... “您已经尝试过” 并不意味着 ”你以正确的方式尝试过”
不，我在问路要走，我可以轻松地添加一些东西以使其对我有用。我正在寻求有关最佳实践的建议。没有“尝试”好的做法。要么你追随一个，要么你不追随，如果你不知道哪个存在，你永远也不会。据我所知，您并不总是需要遇到无法解决的问题。至于现在，我将执行 (keyUp) 并检查事件键。不过感谢您的尝试。

标签： javascript html input angular

【解决方案1】：

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

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

【讨论】：

对我来说这看起来像 angular (1.x) 我要求 angular2 :-) 但我想我可以使用那种绑定
您没有指定这是一个 angular2 问题。我会为此准备一个答案：-D

【解决方案2】：

在 angular 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 键盘事件。如果我能提供更多帮助，请告诉我。

【讨论】：

感谢您也将其添加到 Typescript 中。
IMO 不实用。应该使用@HostListener 并且没有模板。