Многоэтапные формы — это распространенная техника дизайна UX, которая может повысить удобство использования, упростив процесс для пользователя. Что касается технического аспекта, они могут быть сложными в управлении и организации.
Это можно реализовать с помощью одного большого переключателя в шаблоне, но у этого есть некоторые недостатки:
- У нас нет ссылки для каждого шага.
- Это не будет ленивой загрузкой.
- Это затрудняет управление шаблоном и нарушает принцип единой ответственности.
Наша цель — решить все вышеперечисленное, не вводя дополнительный слой, где мы должны хранить значение формы и достоверность. Давайте посмотрим, как мы можем настроить многошаговую форму в Angular, используя маршрутизатор и инжектор узлов. Хотя в этом примере всего два шага, принципы применимы и к формам с большим количеством шагов.
Мы создадим модуль-контейнер, который будет содержать нашу форму и два дочерних модуля — модули account и payment. Angular CLI делает это проще простого. Просто выполните следующие команды:
Теперь мы можем создать нашу форму в нашем компоненте страницы контейнера:
Теперь, используя инжектор узлов, мы можем получить ссылку на форму. Мы можем внедрить компонент Onboarding напрямую в наших дочерних элементов, но я предпочитаю создавать абстракцию.
Давайте создадим класс FormProvider:
Теперь давайте используем его в нашем компоненте Onboarding:
Наш класс расширяет класс FormProvider и использует DI, чтобы указать Angular вернуть экземпляр этого компонента, когда запрашивается FormProvider. Теперь мы можем использовать его в наших дочерних компонентах, например:
Компоненты могут получить доступ к валидности и значению формы и делать то, что необходимо. Его не нужно поддерживать в хранилище, и мы сделали его маршрутизируемым, ленивым и чистым.
Мы можем пропустить функциональность FormProvider, если каждый шаг не зависит от других и нет веских причин помещать всю форму в контейнер.
Подпишитесь на меня в Medium или Twitter, чтобы узнать больше об Angular и JS!
