Валидация модели формы в Angular

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

required нужен для обязательного ввода значения в поле, иначе форма не отправится.
pattern определяет регулярное выражение, которому должны соответствовать введенные данные.

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

export class User {
	constructor(public name: string,
		public email: string) {}
}

Далее в классе AppComponent создаем объект user с пустыми значениями. Пропишем функцию addUser, которая будет выводить в консоль введенные данные пользователя:

export class AppComponent {
	user: User = new User('', '');
	addUser() {
		console.log(this.user);
	}
}

Теперь переходим в HTML-шаблон и задаем разметку нашей формы. В инпуты добавляем атрибут required. А под каждым из них размещаем див, который появится в случае некорректно введенных данных:

<div>
	<div class="form-group">
		<label>Name</label>
		<input class="form-control" name="name" [(ngModel)]="user.name" #name="ngModel" required />
		<div [hidden]="name.valid || name.untouched" class="alert alert-danger">
		Your name is incorrect!
		</div>
	</div>
	<div class="form-group">
		<label>Email</label>
		<input class="form-control" name="email" [(ngModel)]="user.email" #email="ngModel"
			required pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" />
		<div [hidden]="email.valid || email.untouched" class="alert alert-danger">
		Your email is incorrect!
		</div>
	</div>
	<div class="form-group">
		<button class="btn btn-default" (click)="addUser()">Confirm</button>
	</div>
</div>

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