Полное руководство по созданию форм с автосохранением в Angular

Полное руководство по созданию форм с автосохранением в Angular

От автора: приложение, показанное в статье, работает на RxJS и Angular Material.

Следующие команды создают новое приложение Angular, генерируют компонент, в котором есть форма с автосохранением, обслуживают приложение и открывают проект в Visual Studio Code.

Заменяем содержимое app.component.html следующим:

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Извините, <router-outlet> </router-outlet>, вы нам не нужны для этого.

Полное руководство по созданию форм с автосохранением в Angular

Вы увидите на localhost:4200

Добавление Angular Material

Теперь импортируйте необходимые модули из Angular Forms и Angular Material в app.module.ts. Мне пришлось перезагрузить сервер, чтобы изменения вступили в силу.

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

Форма будет профилем с полями ввода для имени, пола и биографии.

Группы форм имеют свойство Observable, называемое valueChanges, которое генерирует событие каждый раз, когда значение изменяется в одном из элементов управления формой. Этот Observable будет основой функции автосохранения.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

В auto-form.component.ts подпишемся на valueChanges и добавим каналы RxJS для управления потоком автосохранения.

Но представьте, что of (true) на самом деле является наблюдаемой функцией, которая сохраняет данные формы в вашей базе данных, потому что это была бы реальная реализация этой функции автосохранения.

Операторы RxJS

debounceTime

Этот оператор не позволяет генерировать событие из Observable до тех пор, пока не пройдет установленный промежуток времени до последнего события. Другими словами, valueChanges не будет генерировать событие, пока профиль не будет изменен в течение 1,5 секунд подряд. Это предотвращает постоянные обновления базы данных, которые могли бы произойти, если бы событие запускалось после каждого отдельного изменения формы. 1,5 секунды основаны на ограничении одной записи в документ за секунду в Cloud Firestore.

switchMap

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

Улучшения UX

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

В auto-form.component.html добавьте переменную где-нибудь, чтобы пользователь мог ее увидеть.

В auto-form.component.ts нам нужен новый оператор RxJS, tap, чтобы запускать функцию каждый раз при изменении элемента управления формы. Эта функция установит статус на «Сохранение». В Подписке, как только данные будут сохранены, этот статус будет установлен на «Сохранено», а через две дополнительных секунды, если статус все еще будет такой же — меняется на «Ожидание», что является пустой строкой.

А вот и рабочая демонстрация:

Полное руководство по созданию форм с автосохранением в Angular

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

Автор: Charlie Levine

Источник: javascript.plainenglish.io

Редакция: Команда webformyself.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Angular 4 NgRx

Посмотрите видео по Angular 4 NgRx

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.