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

Question

我有一个 Angular 表单，我希望用户只提交一个完整的数字（不是十进制），并且他不能选择在表单中写入 .（点）符号来写入十进制数。我想完全阻止在表单上写 .(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)">但它不起作用，仍然可以选择在表单上写 .(dot) 。我想完全阻止在表单上写 .(dot) 的选项。

Answer 1

我相信在keyup事件发生时角色已经在场，你无法阻止已经发生的事情。尝试keypress事件：

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

Answer 2

有一些额外的想法：这个（发现）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. Keypress，它会更接近你想要的，而无需更换字符串

3. 更好的事件名称。如果我有我的 druthers _namesOfAnything 永远不会成为一件事。