Применение директивы ngModel не только устанавливает привязку данных, но и позволяет отслеживать состояние элемента ввода. Для установки состояния Angular применяет к элементам ввода специальные классы CSS:

• Если элемент ввода еще не получал фокус, то устанавливается класс ng-untouched. Если же поле ввода уже получало фокус, то к нему применяется класс ng-touched. При этом получение фокуса не обязательно должно сопровождаться изменением значения в этом поле.
• Если первоначальное значение в поле ввода было изменено, то устанавливается класс ng-dirty. Если же значение не изменялось с момента загрузки страницы, то к элементу ввода применяется класс ng-pristine
• Если значение в поле ввода корректно, то применяется класс ng-valid. Если же значение некорректно, то применяется класс ng-invalid

Например, при запуске веб-страницы для элемента ввода:

<input class="form-control" name="title" [(ngModel)]="title" />

Будет генерироваться следующая разметка html:

<input class="form-control ng-untouched ng-pristine ng-valid" name="title" ng-reflect-name="title" />

Перед тем как отправить форму, нам надо удостовериться, что данная форма содержит корректные значения. Для проверки используется механизм валидации. В Angular 2 мы можем использовать валидацию HTML5, которая применяется в виде атрибутов:

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

Для использования валидации определим следующий компонент:

import {Component, ViewChild} from '@angular/core';
import {NgForm} from "@angular/forms";
 
@Component({
  selector: 'app-root',
  template: `
    <div class="col-xs-8 col-xs-offset-2">
      <form (ngSubmit)="submitForm(myForm)" #myForm="ngForm">
        <div class="form-group" [ngClass]="{'has-error': email.invalid && email.touched}">
          <label>Email</label>
          <input email required ngModel name="email" type="text" #email="ngModel" class="form-control">
          <p class="help-block" *ngIf="email.invalid && email.touched">Введите корректный email</p>
        </div>
        <div class="form-group" [ngClass]="{'has-error': pass.invalid && pass.touched}">
          <label>Пароль</label>
          <input required ngModel #pass="ngModel" name="pass" type="password" class="form-control">
          <p class="help-block" *ngIf="pass.invalid && pass.touched">поле пароль не должно быть пустым</p>
        </div>
        <div class="form-group">
          <label>Выберите страну</label>
          <select required [ngModel]="defaultCountry" name="country" class="form-control">
            <option value="ru">Россия</option>
            <option value="by">Белоруссия</option>
            <option value="ua">Украина</option>
          </select>
        </div>
        <div class="radio" *ngFor="let ans of answers">
          <label>
            <input required [ngModel]="defaultAnswer" name="answer" type="radio" [value]="ans.type"> {{ans.text}}
          </label>
        </div>
        <button [disabled]="!myForm.valid" class="btn btn-success" type="submit">Сохранить</button>
      </form>
    </div>
  `
})
export class AppComponent {
  answers = [{
    type: 'yes',
    text: 'Да'
  }, {
    type: 'no',
    text: 'Нет'
  }];
 
  defaultAnswer = 'no';
  defaultCountry = 'ru';
 
  submitForm(form:NgForm){
    console.log('submit', form);
  }
}

Здесь проверяется валидность поля email. Для этого мы берем переменную email, которая представляет связанный с полем ввода объект NgModel (#email=«ngModel»), и смотрим на свойства valid и untouched у этого объекта. Если хотя бы одно из этих свойств равно true, email.invalid && email.touched мы видим сообщение об ошибке.

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

Для стилизации сообщений об ошибках применяются классы bootstrap:

В то же время несмотря на наличие ошибок валидации мы можем нажать на кнопку и выполнить метод submitForm(), который обработает введенные данные. Однако поскольку данные некорректны, любая обработка будет бессмысленной. И в этом случае можно отключить кнопку. Для этого опять же можно применить проверку на валидность полей. Так, изменим код кнопки следующим образом:

<button [disabled]="!myForm.valid" class="btn btn-success" type="submit">Сохранить</button>

С помощью выражения [disabled]=«myForm.valid» для атрибута disabled устанавливается значение true, то есть кнопка отключается, если хотя бы одно из полей не валидно.