Как установить «выборочный ввод» в поле формы в Angular?

Question

У меня есть поле ввода формы в угловых, которое должно быть заполнено числом.

Как я могу настроить его таким образом, чтобы при попытке добавить любой другой символ, который не является числом, ничего не происходит. Как моя форма может работать так, как будто на клавиатуре работают только целочисленные клавиши? Например, если в моей форме 100 и я пытаюсь ввести символ, такой как знак плюс, ничего не происходит?

вот код для моей формы.

Answer 1

Вы также можете подписаться на событие 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();
  }
}

Обратите внимание, что вам придется разрешить навигационные клавиши, а также клавиши удаления и т. Д.

Answer 2

Если вы хотите, чтобы ваш ввод был только числом, вы можете указать это с помощью свойства type, например:

<input type="number" />

, и он будет принимать только целые числа.