Инициализация и валидации формы регистрации
Страница регистрации прописывается аналогично авторизации. Заполняем файл registration.component.ts .
Создаём объект form далее в ngOnInit инициализируем форму и прописываем контролы. Из новых добавился чекбокс согласия с правилами при регистрации. (Рисунок 48)
Привязываем форму в шаблоне registration компонента к компоненту и создаём метод onSubmit() в компоненте registration.
Далее привязываем контролы к тегам input, добавляем директивы [ngClass] к тегам div.
Копируем для email и пароля тег span с сообщениями об ошибках.
Указываем сообщение об ошибке для имени (Рисунок 49)
Активируем кнопку Зарегистрироваться по аналогии с кнопкой Войти.
Далее нам необходимо описать метод onSubmit. Для регистрации пользователя воспользуемся сервисом users. Создадим новый метод, в котором вызовем метод post и будем в нем передавать путь к БД и массиву users, для того, чтобы система понимала, куда записывать данные пользователей. В методах createNewUser и post будем принимать объект user – данные, с которыми будет создаваться новый пользователь. И возвращаем все через метод map в json формате.(Рисунок 50)
Подключаем сервис в registration компоненте(Рисунок 51)
Обращаемся в onSubmit к данному сервису. Затем принимаем поля: почта, пароль и имя из объекта, где хранятся все данные, которые были введены в форме. Далее создаём новые объекты пользователей. Теперь, при вводе данных в форму регистрации, после нажатия кнопки «Зарегистрироваться», в БД в массив user будут записаны еще одни данные пользователя (Рисунок 52)
Далее создаём перенаправления после успешной регистрации. Импортируем router (Рисунок 53)
Далее в методе subscribe указываем переход на страницу входа и сообщение об успешной регистрации (создаём поле). (Рисунок 54)
Теперь получаем это поле на странице входа. В login компоненте импортируем 2 сервиса (Рисунок 55)
Далее обращаемся к полю route в методе ngOnInit и передаём туда параметры. Затем прописываем условия, что если все параметры переданы (пройдена регистрация), то выводится сообщение showMassage. (Рисунок 56)
Для работы сообщения изменяем метод showMassage() (Рисунок 57)
Изменяем ошибки в методе subscribe (Рисунок 58)
Создание асинхронного валидатора
Осталось решить, что будет происходить при вводе пользователем уже существующей почты. Для решения проблемы, будем использовать асинхронный валидатор.
В registration компоненте создаём новый метод forbiddenEmails(). (Рисунок 59)
В нем мы будем проверять, существует ли данная почта, если да, то выдавать ошибку.
Для этого обращаемся к user сервису и выполняем метод getUserByEmail, в него передаём текущее значение поля input, подключаемся к данному методу, который возвращает объект user. Далее прописываем условие, если сервер возвращает что либо, значит такой пользователь уже есть, и выдаётся ошибка, если нет то передаём null. (Рисунок 60)
Добавляем асинхронный валидатор в email в методе ogOnInit (Рисунок 61)
В шаблоне registration компонента в поле email дублируем span с ошибкой и меняем ключ и текст ошибки (Рисунок 62)
Далее в registration компоненте в методе ngOnInit к контролу email приписываем
Задания
Инициализировать и валидировать поля в формах входа и регистрации.
Организовать получение данных о пользователях с сервера.
Контрольные вопросы
Что такое сервис и для чего он служит?
В чем принцип реактивного подхода к валидированию форм?
Что такое шаблонный подход к валидации форм?
Что такое binding или двухстороннее связывание, как оно реализовано в данной работе?
Литература
Руководство по Angular. [Электронный ресурс]. https://metanit.com/web/angular2/
Документация Angular [Электронный ресурс]. https://angular.io/docs
Лабораторная работа №6_2
Цель работы:
Разработка основной системы. Роутинг, создание пайпов и директив.
Пример выполнения лабораторной работы
Создание компонента и модуля системы. Подключение шаблонов.
Первоначально необходимо создать system модуль и сделать для него свой rout.
Подключаем в system модуле CommonModule и общий модуль SharedModule.
Создаём файл system-routing.module.ts, в нем определяем роуты system модуля(Рисунок 63)
Подключаем этот модуль в system модуле. (Рисунок 64)
Далее создаём роуты в system-routing.module.ts аналогично, как в auth модуле, только в массиве children будут лежать все наши страницы, а корневым компонентом будет являться шаблон с основной сеткой.(Рисунок 65)
Создаём system компонент (файл system.component.ts), прописываем в декораторе селектор и определяем шаблон (Рисунок 66)
Шаблон создаём в папке system (файл system.component.html). Далее импортируем system компонент в system-routing.module.ts
Далее создаём страницы. Переходим в терминал, далее в папку system и с помощью Angular CLI генерируем компоненты и модули этих страниц с помощью команд:
ng g c bill-page –spec false
ng g c planning-page –spec false
ng g c records-page –spec false
ng g c history-page –spec false
Далее прописываем роуты в system-routing модуле (Рисунок 67)
Регистрируем system модуль в app модуле в массиве imports и system компонент в system модуле в массиве declarations.
Далее подключаем шаблоны. В шаблон system компонента копируем меню, header и основной контейнер (Рисунок 68)
Далее наполняем страницу счета bill. Копируем содержимое тега article и вставляем в шаблон bill-page компонента аналогично с остальными страницами.