Ограничение input на число в Angular 2: маска и фильтры

Быстрый ответ

Если вам нужно быстрое решение, прикрепите событие keydown к методу, который будет отклонять ввод символов, не являющихся числами, в вашем приложении Angular.

<input type="text" (keydown)="rejectNonNumeric($event)">

rejectNonNumeric(event): void {
  // Если введенное значение не является числом, запретим его ввод
  if (event.key && !event.key.match(/^\d+$/)) {
    event.preventDefault();
  }
}

Данный метод отфильтровывает нажатия клавиш, и, если нажата клавиша, не соответствующая числу, ввод будет заблокирован. Решение простое и эффективное.

Сохраняем работоспособность важных клавиш

Помните, что при создании директивы, ограничивающей ввод только числами, необходимо сохранить возможность использования служебных клавиш. Пользователи должны иметь возможность использовать Backspace, Tab, End, Home, а также команды управления буфером обмена, такие как ctrl + C/V/X, без каких-либо ограничений. Учтите также возможные различия в поведении разных браузеров и проверьте совместимость.

Директива, помогающая контролировать ввод (и сохранить числа)

Создайте директиву appOnlyNumbers, которая будет ограничивать ввод в полях input только числами:

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appOnlyNumbers]'
})
export class OnlyNumbersDirective {

  constructor(private el: ElementRef) {}

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    let allowedKeys = [
      'Backspace', 'Tab', 'End', 'Home', '-', 'ArrowLeft', 'ArrowRight', 'Delete'
    ];
    if (allowedKeys.includes(event.key) || this.isNumeric(event.key)) {
      return;
    } else {
      event.preventDefault();
    }
  }

  private isNumeric(value: string): boolean {
    return /^\d+$/g.test(value);
  }
}

Визуализация

Представьте себе приемник монет: он принимает только монеты, то есть числа.

Теперь ваше поле ввода в Angular настроено и готово к использованию:

<input type="number" (keypress)="numberOnly($event)">

numberOnly(event): boolean {
  return (event.charCode >= 48 && event.charCode <= 57);
}

Уточнения по использованию поля ввода – Redux

При реализации данной директивы учтите несколько важных аспектов:

Международность программирования

Коды клавиш могут отличаться в разных языках и раскладках клавиатуры, поэтому учтите этот момент.

Подробнее об этом расскажет наш спикер на видео

Ценность каждого события

Применение событий change и paste позволит обрабатывать различные типы ввода, включая использование мыши.

Манипуляции с DOM – с осторожностью

Прямой доступ к элементу через el.nativeElement следует использовать с осторожностью, учитывая принципы одностороннего потока данных Angular.

Полезные материалы

1. Angular — оригинальное руководство от Angular по переменным шаблонов.
2. Angular — добавление пользовательских валидаторов к реактивным формам Angular.
3. Атрибут HTML: pattern – HTML: HyperText Markup Language | MDN — разбор атрибута pattern для валидации ввода.
4. Типы ввода HTML — обзор разнообразных типов ввода данных в HTML от W3Schools.
5. Пользовательские валидаторы форм Angular — создание пользовательских валидаторов для форм в Angular.
6. RegExr: Learn, Build, & Test RegEx — инструмент для работы с регулярными выражениями.