如何将 'selective-input' 设置为 Angular 中的表单域？

Question

我在 angular 中有一个表单输入字段，需要填写一个数字。

我该如何设置，当您尝试添加任何其他非数字字符时，什么也不会发生。我的表单如何工作，就好像键盘上只有整数键在工作一样？例如，如果我的表单有 100，我尝试输入一个字符，如加号，什么都没有发生？

here is the code 我的表格。

Answer 1

如果您只想输入数字，您可以指定类型 属性，例如：

<input type="number" />

并且它只接受整数。

Answer 2

您还可以订阅该输入的按键事件：

// in your template
<input (keydown)='onKeyDown($event)' ...>

// in your component
onKeyDown(event: KeyboardEvent) {
  if (!event.key.match(/[0-9]{1}|Delete|ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Backspace/)) {
    event.preventDefault();
  }
}

请注意，您还必须允许使用导航键和删除键等。