Стек MEAN

#6 - Форма регистрации

#6 - Форма регистрации

В уроке мы создадим форму регистрации. Форма будет получать данные от пользователя, проверять их и в случае если они корректны, то передавать их на серверную часть веб сайта.

Видеоурок

Разработка форм в Angular

Для работы с формами в Angular JS зачастую используется модуль FormsModule. Для его использования вам необходимо импортировать его в файл app.module.ts, а также необходимо добавить его в imports все в том же файле app.module.


После подключения модуля вам предстоит сделать три вещи:

  1. Создать форму в HTML файле;
  2. Добавить к полям в форму специальный атрибут - ngModel;
  3. Добавить функцию, что сработает при нажатии на кнопку в форме.

Создание формы это простой процесс: прописываете HTML код, добавляете стили и все готово. 


Далее необходимо добавить к каждому полю атрибут ngModel в которых прописать значения, что позже в классе компонента будут соответствовать переменным. Также на тег формы стоит добавить обработчик события submit. Он будет вызывать функцию, через которую вы сможете обрабатывать все данные.


Пример простейшей формы приведен ниже (HTML файл):

<form (submit)="onSubmit()">
	<input type="text" [(ngModel)]="name" name="name" class="form-control"><br>
	<input type="password" [(ngModel)]="password" name="password" class="form-control"><br>
	<button class="btn btn-success" type="submit">Добавить</button>
</form>

Класс, что прикреплен к данному компоненту:

import { Component, OnInit } from '@angular/core';

@Component({
	selector: 'app-form',
	templateUrl: './form.component.html',
	styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {

	// В эти переменные будут помещены данные из формы
	name: String;
	password: String;

	constructor() { }

	ngOnInit() {
	}

	onSubmit() {
		console.log("Имя: " + this.name + ". Пароль: " + this.password);
	}

}

Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Задание к уроку

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

Большое задание по курсу

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

Также стоит посмотреть

Изучение MongoDB / Работа с базой данных
8 уроков
Курс по React JS для начинающих
14 уроков
Уроки Angular для начинающих
7 уроков
Создание приложения на React JS / Использование API
7 уроков
Уроки Node JS и Express для начинающих
17 уроков
Комментарии для сайта Cackle