角驱动形式如何禁用选项在数字输入处写入十进制数字

Question

我有一个形式，我希望用户只提交一个数字(不是十进制(，他将没有书写的选项。(dot(符号。为了写小数号。我想完全阻止编写的选项。(点(以表格。有可能吗？

我在这里尝试了解决方案：适当限制文本输入值的正确方法(例如，数字(使用正则：

在component.ts中添加此功能

_keyUp(event: any) {
    const pattern = /[0-9+- ]/;
    let inputChar = String.fromCharCode(event.charCode);
    if (!pattern.test(inputChar)) {
      // invalid character, prevent input
      event.preventDefault();
    }
}

在模板中使用以下

<input(keyup)="_keyUp($event)">

但它不起作用，编写的选项。

我想完全阻止写入的选项。(点(以表格。

Answer 1

我相信该角色在keyup事件时已经存在，并且您不能预防已经发生的事情。尝试keypress事件：

<input (keypress)="_keyUp($event)">

Answer 2

@cdelaney是正确的，但是一些其他想法：这个(找到的(stackblitz我会说更好：

组件html：

<input (keypress)="numberOnly($event)" type="text">

和TS文件：

numberOnly(event): boolean {
const charCode = (event.which) ? event.which : event.keyCode;
   if (charCode > 31 && (charCode < 48 || charCode > 57)) {
   return false;
}
  return true;
}

为什么更好？

1. 没有正则：俗话说，如果您尝试解决正则问题，现在有两个问题。

2. 按键，它将更接近您想要的东西而无需更换字符串

3. 更好的事件名称。如果我有我的druthers _namesofanything永远不会是一回事。