如何在Angular的表单字段中设置“选择输入”？

Question

我有一个用角表示的表单输入字段，将用数字填充。

如何设置它，以使其在尝试添加非数字的任何其他字符时都不会发生任何事情。我的表单如何工作，好像只有键盘上的整数键在起作用？例如，如果我的表单有100，而我尝试输入加号之类的字符，则什么都没有发生？

here is the code for the form。

Answer 1

如果您希望输入的内容仅是数字，则可以使用type属性指定它，例如：

<input type="number" />

，它将仅接受整数。

Answer 2

您还可以为该输入订阅keydown事件：

// 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();
  }
}

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