Измените внешний вид или поведение элементов DOM и компонентов Angular с помощью директив атрибутов. Здесь мы научимся создавать пользовательские директивы.
мы можем создать пользовательскую директиву для проверки поля ввода. и преимущество пользовательской директивы заключается в том, что мы создаем и используем эту директиву внутри любого компонента или модуля для проверки формы с использованием отдельных ключевых слов в элементах DOM.
В этом разделе также рассказывается, как создать директиву и использовать @HostListener.
Требование:поле ввода может принимать только значения int и float.
Чтобы создать директиву,
используйте команду CLI ng generate directive inputvalidate
после выполнения команды cli будет сгенерирован файл inputvalidate.directive.ts.
Важно не забыть импортировать путь к директиве inputvalidate в файле app.module.ts.
Использовать пользовательскую директиву: создать поле ввода в любом компоненте.
И используйте ключевое слово onlyDecimal внутри поля ввода в любых формах или любых компонентах.
Здесь я объясню приведенный выше фрагмент кода для лучшего понимания.
прежде всего измените имя селектора на onlyDecimal для удобства использования этого ключевого слова в любых формах внутри полей ввода.
затем я упомяну два регулярных выражения, но я использую второе регулярное выражение для проверки значений только int и float.
Добавьте обработчики событий, которые реагируют на нажатие клавиш клавиатуры, каждый с помощью декоратора @HostListener. и я использую keyboardEvent для определения всех значений клавиш с клавиатуры.
конечное условие внутри функции, мы сопоставляем каждое введенное значение ключа с нашим регулярным выражением, если оно будет истинным, оно вернется, в противном случае оно будет предотвращено по умолчанию.
Требование: в поле ввода будет отображаться сообщение об ошибке при вводе пробела.
теперь снова повторите процесс, чтобы создать новую пользовательскую директиву
Чтобы создать директиву,
используйте команду CLI ng generate directive whitespacevalidate
он создаст файл whitespacevalidate.directive.ts.
Важно не забыть импортировать путь к директиве whitespacevalidate в файле app.module.ts.
Использовать пользовательскую директиву: создать поле ввода в любом компоненте.
И используйте ключевое слово validateWhitespace внутри поля ввода в любых формах или любых компонентах.
окончательно !!! Вы успешно создали и добавили обе пользовательские директивы в свои формы Angular Reactive.
Пожалуйста, не забудьте похлопать, если статья оказалась полезной. Не стесняйтесь обращаться ко мне на других социальных платформах, таких как LinkedIn и github.
Если вы хотите больше блогов, связанных с Angular и JavaScript. следуйте за мной и комментируйте любые вопросы и предложения. Я вернусь с дополнительной информацией и темой, связанной с Angular и JavaScript и многим другим.😎😊
