#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);
	}

}