Валидация формы Angular (Ionic). Как изменить текст ошибки?

Я  был удивлен, когда узнал что в Angular нет кастомизации ошибок при валидации формы. То есть, встроенные билдеры форм есть, встроенные валидаторы есть, но вот встроенных текстов ошибок нет. Соответственно менять то нечего. Нужно создавать свои. А чтобы каждый раз не писать захардкоженый вывод ошибок, можно создать шаблон, в котором будет меняться только текст ошибок.

Создание формы

Создадим стандартную форму в Angular

Что мы имеем?

3 поля с разными именами

3 разных валидатора- обязательное поле, емаил, валидация длины строки. Для каждого валидатора нужно понятное сообщение для показа пользователю.

Что предлагает Angular? Пример из официальной документации:

Расписывать каждый тип ошибки? На одно только поле их набралось три. А если это сложная форма регистрации с несколькими полями? Дублировать одно и то же. Ужас.

Другой путь

Напишем свое решение. Для начала нужно понять какое поле невалидное. Получить список полей не прошедших валидацию можно так:

После получения списка ошибок, нужно придумать для каждого текст. Воспользуемся наработками из Laravel and Yii2. Там для каждого поля в коде можно прописать свой текст.

errorMessages — состоит из тип_ошибки: текст_ошибки

formLabels — чисто опционально, чтобы вместо сухого «Обязательное поле», «Введите значение в поле», было «Введите Имя» или «Введите Телефон»

Делаем подстановку сообщении:

Обработчик при отправке формы:

Получился вот такой вывод:

Вывод ошибки в форме Angular(Ionic)
Вывод ошибки в форме Angular(Ionic)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *