如何将“选择性输入”设置为 Angular 中的表单字段？答案

【问题标题】：How do I set 'selective-input' to a form field in Angular?如何将“选择性输入”设置为 Angular 中的表单字段？
【发布时间】：2019-01-23 18:06:11
【问题描述】：

我有一个用数字填充的 Angular 表单输入字段。

我如何设置它，当您尝试添加任何其他不是数字的字符时，什么都不会发生。我的表单如何像键盘上的整数键一样工作？例如，如果我的表单有 100，而我尝试输入一个像加号这样的字符，则没有任何反应？

here is the code 我的表单。

【问题讨论】：

标签： javascript angular forms typescript autocorrect

【解决方案1】：

如果您希望输入仅为数字，您可以使用 type 属性指定，例如：

<input type="number" />

它只接受整数。

【讨论】：

谢谢你..这行得通。但是，由于我有用于添加和减去数字值的向上和向下箭头，我该如何摆脱呢？
刚刚在 cmets 中找到了我的问题的 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();
  }
}

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

【讨论】：