Директива NgForm в Angular

Для корректной работы с формой, необходимо обернуть все ее элементы в специальный тег <form>. В этом случае все они будут представлять собой единое целое. В Angular есть специальная директива NgForm, которая создает объект FormGroup. Данный объект привязывается к форме для отслеживания всех ее состояний, а также для управления валидацией.

Директива NgForm применяется в теге формы следующим образом:

<form #myForm="ngForm">

Давайте применим директиву NgForm в главном компоненте проекта. Для это сначала импортируем ее:

import { Component } from '@angular/core';
import { NgForm} from '@angular/forms';

В классе AppComponent зададим свойства name и email. Также объявим функцию submit, принимающую параметром свойство form типа NgForm. Пусть функция будет выводить объект с формой в консоль браузера:

export class AppComponent {
	name: string = '';
	email: string = '';

	submit(form: NgForm) {
		console.log(form);
	}
}

Теперь переходим в HTML-шаблон и прописываем в форме переменную #myForm, которая в качестве значения примет объект ngForm. Отключаем кнопку с помощью атрибута disabled, чтобы предотвратить ее случайное нажатие. И привязываем к ней функцию submit из главного компонента. После формы сделаем два дива для вывода информации о пользователе:

<form #myForm="ngForm" novalidate>
	<div class="form-group">
		<label>Name</label>
		<input class="form-control" name="name" [(ngModel)]="name" required />
	</div>
	<div class="form-group">
		<label>Email</label>
		<input class="form-control" name="email" ngModel
		required email />
	</div>
	<div class="form-group">
	<button [disabled]="myForm.invalid"
	class="btn btn-default" (click)="submit(myForm)">Confirm</button>
	</div>
</form>
<div>Name: {{myForm.value.name}}</div>
<div>Email: {{myForm.value.email}}</div>