В моей предыдущей статье мы говорили о том, как показывать ошибки формы при отправке.

Когда ваша форма начнет расти, вы можете получить что-то вроде этого:

Если вы так кодируете все свои формы, вы, вероятно, психопат 😜 (шучу)

Шаблон подробный; трудно понять, что происходит, и ты не СУХИЕ.

Что, если бы мы могли написать что-то вроде этого:

Я думаю, это выглядит намного лучше (позже вы увидите, как мы можем быть еще чище). Итак, давайте создадим компонент control-errors.

Нам понадобится два Inputs:

  1. Имя элемента управления.
  2. Объект ошибок.

Затем мы можем попросить Angular предоставить нам экземпляр ngForm в нашем компоненте через внедрение зависимостей с помощью декоратора Host. (мы также используем декоратор Optional для защиты нашего кода)

Это то же самое, что и в нашем шаблоне:

<form #myform="ngForm"></form>

Если вы все еще не знаете, откуда взялся этот NgForm, вкратце, это просто встроенная директива с селектором, который указывает практически на любой тег формы.

@Directive({
 selector: ‘form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]’
})
export class NgForm extends ControlContainer implements Form {}

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

Наша функция получения данных проста:

  1. Найдите текущий элемент управления в нашем экземпляре формы.
  2. Переберите ключи Input ошибок.
  3. Проверьте с помощью метода hasError(), есть ли у нас ошибка с тем же ключом.
  4. Покажи ошибку.

Это все! Вы можете играть с плункером.

Если вас устраивает эта реализация, все готово. Я все еще недоволен. Думаю, мы можем сделать его еще чище, может быть, примерно так:

<control-errors control="firstName">

Я не собираюсь реализовывать это полностью, но могу дать вам подсказку.

Во-первых, нам нужно централизовать наш объект ошибок, поэтому давайте сделаем это с помощью DI.

Теперь мы можем внедрить объект CONTROL_ERRORS и реализовать более сложную логику. На это уйдет больше времени, но польза очевидна.

В настоящее время директива control-errors работает только с формами на основе шаблонов. Вам нужно добавить немного кода, чтобы он также работал с реактивными формами. Вы можете проверить мой плункер, чтобы узнать, какие изменения.

👂🏻 И последнее, но не менее важное: слышали ли вы об аките?

Акита - это модель управления государством, которую мы разработали здесь, в Datorama. Он успешно используется в среде производства больших данных более семи месяцев, и мы постоянно добавляем в него функции.

Акита поощряет простоту. Он избавляет вас от хлопот по созданию шаблонного кода и предлагает мощные инструменты с умеренной кривой обучения, подходящие как для опытных, так и для неопытных разработчиков.

Я очень рекомендую это проверить.



🚀 Представляем Akita: новый шаблон управления состоянием для приложений Angular
Каждый разработчик знает, что управление состоянием сложно. Постоянно отслеживая, что было обновлено, почему и… netbasal.com



Подпишитесь на меня в Medium или Twitter, чтобы узнать больше об Angular, Akita и JS!