Ограничение 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.
Полезные материалы
- Angular — оригинальное руководство от Angular по переменным шаблонов.
- Angular — добавление пользовательских валидаторов к реактивным формам Angular.
- Атрибут HTML: pattern – HTML: HyperText Markup Language | MDN — разбор атрибута pattern для валидации ввода.
- Типы ввода HTML — обзор разнообразных типов ввода данных в HTML от W3Schools.
- Пользовательские валидаторы форм Angular — создание пользовательских валидаторов для форм в Angular.
- RegExr: Learn, Build, & Test RegEx — инструмент для работы с регулярными выражениями.