Держите его сухим с реактивными формами на нескольких платформах.

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

Хотите погрузиться в код?
https://plnkr.co/edit/D7AB2F5wHLfLa9DmpnAG?p=preview

Архитектура приложения

Давайте представим, что у нас есть приложение для ведения блога, поэтому мы могли бы начать с создания формы статьи!

.
+-- src
|   +-- app
|       +-- core
|       +-- shared
|       +-- models
|           +-- app-forms
|               +-- app-forms-base.class.ts
|               +-- article-form
|                   +-- article-form.backend.ts
|                   +-- article-form.interface.ts
|                   +-- article-form.model.ts
|                   +-- article-form.service.ts
|                   +-- article-form.module.ts
...

Форма статьи

Наша форма состоит из 5 файлов + app-form-base.class.ts, которые мы будем использовать позже, поэтому давайте разберем их!

  • article-form.backend.ts, где будет обрабатываться вся связь с нашим бэкэндом, например create, update, delete.
  • article-form.interface.ts, где мы определяем машинописный интерфейс для нашей модели.
  • article-form.model.ts, где мы строим модель и фактическую форму с помощью Reactive Forms Angular.
  • article-form.service.ts, где мы объединяем наш бэкэнд и модель формы в сервис @injectable(), который предоставляет все функции и контролирует состояния связи.
  • article-form.module.ts, где мы внедряем наши сервисы в providers, чтобы они были доступны там, где мы import этого модуля.

И не забыть

  • app-forms-base.class.ts. Здесь мы можем определить общие части нашего сервиса, которые мы хотим расширить во всех наших сервисах форм.

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

Основа формы

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

На данный момент мы просто добавляем наблюдаемую, которая может сообщить нам в любое время, взаимодействует ли форма с серверной частью, но это также может быть расширено для будущих нужд. Теперь давайте начнем строить настоящую форму!

Шаг за шагом

Я проведу вас через создание полной формы шаг за шагом.

  1. Напишите интерфейс для модели, с которой работает наша форма.
  2. Создайте модель и модель-сервис, которая создает реактивную форму с помощью angular.
  3. Создайте сервис, который берет данные из нашей модели и публикует их в нашем бэкэнде.
  4. Создайте сервис, который сочетает в себе нашу модель, реактивную форму, устанавливает состояния и предоставляет функции для создания, обновления и удаления.
  5. Создайте модуль, предоставляющий наши услуги системе впрыска Angular.
  6. Используйте его с простым шаблоном.

Итак, сначала давайте начнем с написания интерфейса для статьи!

1. Интерфейс статьи

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

? означает, что это необязательно, мы делаем их необязательными, чтобы позже получить гибкость, если мы будем делать форму, которая будет обновлять только заголовок и описание. Даже id является необязательным, поскольку мы также хотели бы использовать интерфейс для create, где у нас нет id.

2. Модель статьи

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

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

Возможно, вы заметили Object.keys(data)... в конструкторе. Это может показаться странным, но с помощью этого метода мы создаем переменные динамически на основе того, с какими полями вы создаете экземпляр службы, и это дает нам возможность создавать разные формы с разными полями, которые по-прежнему используют преимущества одной и той же бизнес-логики.

Затем мы можем продолжить создание службы, которая создаст нашу форму, которую мы позже будем использовать в наших шаблонах. Если вы новичок в Reactive Forms, я рекомендую эту замечательную статью с https://toddmotto.com/angular-2-forms-reactive, прежде чем продолжить.

Здесь мы создаем форму только с formControls для полей, которые мы получили из конструктора, а также определяем наши валидаторы.

3. Бэкэнд-сервис

Наш серверный сервис позаботится об отправке наших данных на сервер и возврате результата.

4. Служба оформления инъекционных статей

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

Сначала мы расширяем AppFormBase, чтобы у нас были все наблюдаемые объекты isSubmitting, Successed, Failed, и запускаем их соответствующим образом.

Затем мы внедрим AppFormBackend как службу, чтобы мы могли вызывать функции create, update, delete, передавать им данные и возвращать ответ.

5. Модуль формы статьи

Для простого способа предоставления зависимостей нашей формы мы создадим файл ArticleFormModule.

И теперь у нас есть все, чтобы построить нашу форму в шаблонах! Это было довольно объемно, но теперь я покажу вам, как использовать вашу новую службу в шаблоне, и, надеюсь, это покажет вам, как здорово создавать шаблоны форм с помощью нашей новой службы форм.

6. Подключите пользовательский интерфейс

В этом примере я покажу вам, как заставить форму работать в HTML-шаблоне. Сначала создадим новый шаблон формы, пока я сделаю его в AppComponent.

Прежде чем мы сможем построить форму в AppComponent, нам нужно import с ArticleFormModule по AppModule.

Затем давайте обновим наш AppComponent, чтобы использовать наш ArticleFormService, предоставим состояния Observable, которые мы определили в AppFormsBase, и создадим функцию create, которая запускает функцию create из сервиса.

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

  1. Он должен показывать индикатор загрузки при отправке формы.
  2. Кнопка отправки должна быть отключена, если форма недействительна.
  3. Кнопка отправки должна сообщать о состоянии отправки формы: Отправить, отправлено.
  4. Кнопка отправки должна стать доступной для нажатия, если форма изменена после успешной отправки данных — Это полезно для форм обновления, давайте покажем, что можем на примере.
  5. Под каждым полем, которое недействительно после прикосновения, должно появиться сообщение об ошибке.
  6. Пользователь должен иметь возможность очищать форму и состояния, такие как нетронутое состояние, касание, статус и т. д.

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

Я надеюсь, вам понравилась моя статья о том, как создавать независимые формы пользовательского интерфейса в Angular, и, пожалуйста, прокомментируйте ниже, если у вас есть комментарии, отзывы, идеи или что-то совершенно не связанное с ней.

И, наконец, спасибо Деннису Хаулунду Нильсену за участие в этой концепции.

Вы можете попробовать форму из этой статьи на https://plnkr.co/edit/D7AB2F5wHLfLa9DmpnAG?p=preview