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

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&nbsp;(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;&nbsp; &nbsp;if (charCode > 31 && (charCode < 48 || charCode > 57)) {&nbsp; &nbsp;return false;}&nbsp; return true;}为什么更好？没有正则表达式：俗话说，如果你试图用正则表达式解决一个问题，现在你有两个问题。Keypress，它会更接近你想要的，而无需更换字符串更好的事件名称。如果我有我的 druthers _namesOfAnything 永远不会成为一件事。