===== валидация =====

==== Состояние модели ====

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

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

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

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

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

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

==== Валидация ====

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

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

<code javascript>
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);
  }
}
</code>

Здесь проверяется валидность поля email. Для этого мы берем переменную email, которая представляет связанный с полем ввода объект NgModel (#email="ngModel"), и смотрим на свойства valid и untouched у этого объекта. Если хотя бы одно из этих свойств равно true, email.invalid && email.touched мы видим сообщение об ошибке. \\  \\ В принципе для проверки корректности нам достаточно посмотреть на свойство valid. Однако не всегда может желательно сразу отображать ошибку при загрузке страницы. В данном же случае мы смотрим на валидность, если поле ввода уже получало фокус. \\  \\ Для стилизации сообщений об ошибках применяются классы bootstrap: \\ {{  :angular:angular2:forms:screen3.png  }} \\

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

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

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