Создание директивы верхнего регистра в Angular: улучшение пользовательского ввода

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

В Angular директивы играют решающую роль в расширении функциональности HTML-элементов. Они позволяют нам управлять поведением и внешним видом элементов на основе пользовательской логики. В этой статье мы рассмотрим создание директивы верхнего регистра, которая автоматически преобразует ввод пользователя в верхний регистр. Эта директива может быть применена к любому полю ввода, предоставляя удобный способ обеспечения последовательного регистра в ваших приложениях Angular. Давайте погрузимся и посмотрим, как реализовать эту директиву.

Реализация директивы:

Для начала давайте взглянем на код директивы верхнего регистра:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appUppercase]',
})
export class UppercaseDirective {
  @HostListener('input', ['$event']) onInput(event: KeyboardEvent) {
    const input = event.target as HTMLInputElement;
    input.value = input.value.toUpperCase();
  }
}

@NgModule({
  declarations: [UppercaseDirective],
  exports: [UppercaseDirective],
  imports: [CommonModule],
})
export class DirectiveModule {}

Директива Uppercase создается с помощью декоратора @Directive из @angular/core. Декоратор принимает объект, определяющий селектор для директивы, которая в данном случае указана как [appUppercase].

Внутри класса директив мы определяем метод onInput, украшенный @HostListener. Этот метод прослушивает событие input и срабатывает всякий раз, когда пользователь вводит или изменяет значение элемента, к которому применяется директива. Метод получает KeyboardEvent в качестве аргумента.

В методе onInput мы извлекаем целевой элемент с помощью event.target и подтверждаем его тип как HTMLInputElement. Затем мы преобразуем входное значение в верхний регистр с помощью метода toUpperCase() и присваиваем измененное значение обратно элементу ввода.

Класс директивы экспортируется и включается в Angular NgModule с помощью декоратора @NgModule. Он объявляется в массиве declarations и экспортируется в массив exports, что позволяет использовать его в других модулях или компонентах. CommonModule импортируется для обеспечения доступности общих директив и компонентов.

Использование:

Чтобы использовать директиву верхнего регистра в приложении Angular, выполните следующие действия:

1. Импортируйте DirectiveModule в модуль, где вы хотите использовать директиву.

import { DirectiveModule } from 'path/to/directive.module';
// ...

@NgModule({
  imports: [DirectiveModule],
  // ...
})
export class YourModule { }

2. Примените директиву к полю ввода, добавив атрибут [appUppercase] к нужному элементу.

<input type="text" [appUppercase] />

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

💡 Теперь вы можете повторно использовать директиву UpperCase, упаковывая, тестируя, документируя и публикуя ее независимо с помощью Bit, чтобы вы (или другие) могли импортировать ее в любой проект с простая команда bit import your.username/UpperCase, а затем вы можете применить атрибут appUpperCase к своим элементам ввода.

Узнать больше:

Вывод:

В этой статье мы рассмотрели создание директивы верхнего регистра в Angular. Применяя эту директиву к полям ввода, вы можете легко обеспечить единообразие регистра и улучшить взаимодействие с пользователем. Директива прослушивает событие «вход» и преобразует входное значение в верхний регистр в режиме реального времени. Использование директивной функциональности Angular позволяет вам улучшить поведение вашего приложения и настроить его в соответствии с вашими конкретными требованиями.

Не забудьте импортировать DirectiveModule в соответствующие модули и применить атрибут [appUppercase] к полям ввода, где вы хотите использовать верхний регистр. Директивные возможности Angular огромны.

Создавайте приложения Angular с повторно используемыми компонентами, как Lego.

Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.

Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.

→ Подробнее

Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:

→ Микро-интерфейсы

→ Система дизайна

→ Совместное использование кода и повторное использование

→ Монорепо

Узнать больше: