Створення кастомного валідатора порівняння в Angular

текст перекладу

Існує кілька традиційних підходів до реалізації користувацької валідації в формах Angular, але сьогодні ми розглянемо унікальне рішення за допомогою кастомних директив. Якщо ви стежите за моїм блогом, то знаєте, що я великий прихильник директив — вони дозволяють створювати сучасні, динамічні додатки, так, що магія ніби криється в самих атрибутах.

При роботі з формами в Angular валідація є важливою функцією, яка забезпечує відповідність введених даних певним критеріям до того, як вони будуть надіслані. Хоча Angular має вбудовані валідатори, такі як required, minLength та maxLength, є випадки, коли необхідна спеціальна логіка валідації, адаптована до вимог вашого додатку.

У цьому блозі ми створимо кастомний валідатор порівняння, який дозволить порівнювати значення одного елемента форми з іншим.
текст перекладу
Це особливо корисно для сценаріїв, коли потрібно перевірити, чи співпадає поле підтвердження пароля з полем пароля, або ж переконатись, що значення числового поля більше або дорівнює значенню іншого поля.

Ідея

Що ми будемо створювати:

Ми реалізуємо директиву Angular з назвою ComparisonValidatorDirective. Ця директива:

• Валідовує елемент форми, порівнюючи його зі значенням іншого елемента.
• Підтримує операції порівняння, такі як рівно (EQ), більше ніж (GT) та менше ніж (LT).
• Надає зворотний зв'язок у випадку невірного стану, щоб допомогти користувачам виправити введені дані.

Реалізація:

Кастомний валідатор директиви

Пояснення:

• Метадані директиви

Метадані директиви

1.
текст перекладу
selector: '[compareWith]': Вказує, що директиву можна використовувати як атрибут з назвою compareWith.
2. providers: Реєструє директиву як кастомний валідатор за допомогою NG_VALIDATORS. Встановлення параметра multi: true дозволяє Angular включити цей валідатор поряд з іншими.

• Вхідні параметри для конфігурації

Вхідні параметри

1. compareWith: Вказує назву елемента управління (або сам елемент управління), з яким буде здійснюватися порівняння. Може бути:
   — Рядок (назва елемента управління)
   — Екземпляр AbstractControl (пряма посилання)
2. operation: Вказує операцію порівняння (за замовчуванням 'EQ').

• Допоміжні методи

getParent()

getParent(): Отримує батьківський елемент поточного елемента форми.
текст перекладу
Якщо батьківський елемент відсутній, повертається null.

getControlToCompare()

getControlToCompare():

1. Якщо compareWith є рядком, він отримує елемент управління з батьківського FormGroup або FormArray.
2. Якщо compareWith є екземпляром AbstractControl, він безпосередньо повертає цей елемент управління.

isOperationValid()

isOperationValid():

1. Переконується, що операції, відмінні від EQ, виконуються тільки з числовими значеннями.
2. Виводить помилку в консоль, якщо виявлено некоректні введення.

isConditionMet()

isConditionMet():

1. Порівнює значення елемента управління (value) з значенням елемента порівняння (compareWithValue) на основі вибраної операції.
   2.
   текст перекладу
   Перетворює операції, відмінні від EQ, у числа за допомогою Number(), щоб забезпечити числове порівняння.

• Логіка валідації:

Логіка валідації

1. Отримання батьківського елемента: Батьківський елемент отримується за допомогою getParent().
2. Отримання елемента порівняння: Елемент порівняння (compareControl) отримується за допомогою getControlToCompare(). Якщо його не існує, виводиться попередження, і повертається null.
3. Перевірка коректних введень: Пропускає валідацію, якщо значення будь-якого з елементів відсутнє або операція є некоректною.
4. Виконання порівняння: Викликається isConditionMet(), щоб перевірити, чи задоволена умова.
5. Повернення результату валідації:
   — Повертається null, якщо значення задовольняють умову (коректний стан).
   текст перекладу
   — Повертає об'єкт ValidationErrors з деталями (failedOperation та expectedValue), якщо умова не виконується.

Приклад використання

Ось як можна використовувати директиву в шаблоні Angular:

Як використовувати кастомний валідатор директиви

Висновок

Користувацька валідація є невід'ємною частиною створення динамічних та зручних форм в Angular. Використовуючи ComparisonValidatorDirective, ми отримуємо чисте, багаторазове та гнучке рішення для порівняння значень елементів форми з різними операціями, такими як EQ, GT, LT і не тільки. Такий підхід дозволяє зберігати ваші шаблони мінімалістичними, при цьому забезпечуючи надійну логіку валідації в ваших додатках.

Якщо цей блог був корисним, не соромтеся залишити коментар з вашими думками чи запитаннями.
текст перекладу
І не забудьте поставити аплодисменти, щоб показати свою підтримку! Продовжуємо разом створювати розумніші, чистіші та ефективніші додатки на Angular.

Знайти вихідний код можна тут, а також подивитись демонстрацію в реальному часі тут

До зустрічі з новим викликом або блогом.

“Програмування — це мистецтво, яке потребує
як творчості, так і логіки.”

Перекладено з: Building a Custom Comparison Validator Directive in Angular