Angular2輸入類型編號，無小數

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更可取，因為如果您想現在或將來將其他角度邏輯綁定到事件中，則可以使用范圍對象偵聽鍵事件。

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中，這與角度1非常相似。 得出的結論是，最好使邏輯在角度范圍內運行，因為如果您需要這樣做，或者如果此類中的邏輯將會增長，則可以基於當前事件觸發/響應其他角度事件。

語法不同，但是邏輯非常相同-創建一個監聽按鍵的指令。

@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鍵盤事件。 讓我知道是否能再提供幫助。