=====Валидация формы=====

AngularJS предлагает проверку формы на стороне клиента.\\
AngularJS отслеживает состояние полей формы и ввода (input, textarea, select) и позволяет уведомлять пользователя о текущем состоянии.\\
AngularJS также содержит информацию о том, были ли они затронуты, или изменены, или нет.\\

====Required====

Используйте атрибут HTML5, необходимый для указания того, что поле ввода должно быть заполнено:\\
<code html>
 <form name="myForm">
  <input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1> 
</code>

====E-mail====

Используйте атрибут HTML5, чтобы указать, что значение должно быть электронной почтой:
<code html>
<form name="myForm">
  <input name="myInput" ng-model="myInput" type="email">
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1> 
</code>

====Form State and Input State====

AngularJS постоянно обновляет состояние как формы, так и полей ввода.\\
Поля ввода имеют следующие состояния:

  * **$untouched** Поле еще не было затронуто
  * **$touched** Поле было затронуто
  * **$pristine** Поле еще не было изменено
  * **$dirty** Поле было изменено
  * **$invalid** Содержание поля недействительно
  * **$valid** Содержание поля действительно

Все они являются свойствами полей ввода и имеют значение true или false.\\
Формы имеют следующие состояния:\\

$pristine Поля еще не были изменены
$dirty Один или несколько были изменены
$invalid Содержание формы недействительно
$valid Содержание формы действительно
$submitted Форма отправлена

Все они являются свойствами формы и являются либо истинными, либо ложными.

Вы можете использовать эти состояния для показа значимых сообщений пользователю. Например, если поле является обязательным, и пользователь оставляет его пустым, вы должны вывести ему предупреждение:\\

===пример===
Показать сообщение об ошибке, если на поле сфокусировались и оставили его пустым:\\
<code html>
 <input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span> 
</code>

====CSS Classes====

//AngularJS// добавляет классы //CSS// к формам и полям ввода в зависимости от их состояний.\\
\\
Следующие классы добавляются или удаляются из полей ввода:

  * **ng-untouched** Поле еще не было затронуто
  * **ng-touched** Поле было затронуто
  * **ng-pristine** Поле еще не было изменено
  * **ng-dirty** Поле было изменено
  * **ng-valid** Содержание поля действительно
  * **ng-invalid** Содержание поля недействительно
  * **ng-valid-key** Один ключ для каждой проверки. Пример: ng-valid-required, полезно, когда есть более чем один параметр, который должен быть проверен.
  * **ng-invalid-key** Пример: ng-invalid-required

Следующие классы добавляются или удаляются из форм:\\
  * **ng-pristine** Ни одно из полей не было изменено
  * **ng-dirty** Одно или несколько полей были изменены
  * **ng-valid** Содержание формы действительно
  * **ng-invalid** Содержание формы недействительно
  * **ng-valid-key** Один ключ для каждой проверки. Пример: ng-valid-required, полезно, когда есть более чем один параметр, который должен быть проверен.
  * **ng-invalid-key** Пример: ng-invalid-required

Классы удаляются, если значение, которое они представляют, равно false.\\
Добавьте стили для этих классов, чтобы дать вашему приложению лучший и более понятный пользовательский интерфейс.\\

===Пример===

Применяйте стили, используя стандартный CSS:
<code html>

<style>
input.ng-invalid {
  background-color: pink;
}
input.ng-valid {
  background-color: lightgreen;
}
</style>
</code>

Формы также могут быть стилизованы:

<code html>
<style>
form.ng-pristine {
  background-color: lightblue;
}
form.ng-dirty {
  background-color: pink;
}
</style>
</code>

====Отображение сообщений о невалидности====

отображение сообщений о невалидности пользовательского ввода это хороший тон но существует два подхода для отображения сообщений: 1й когда ввод валидируется после каждого действия пользователя и 2й данные валидируются после нажатия на кнопку **submit**\\
<code html>
<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <!--отображение сообщений о невалидности пользовательского ввода это хороший тон но существует два подхода для 
    отображения сообщений: 1й когда ввод валидируется после каждого действия пользователя и 2й данные валидируются после нажатия на кнопку submit-->
    <title>Forms</title>
    <script src="../angular.min%20.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script>
        angular.module("studyModule", [])
            .controller("studyCtrl", function ($scope) {
                $scope.addNewUser = function (userDetails) {
                    if (myForm.$valid) {
                        $scope.message = userDetails.name
                            + " (" + userDetails.email + ") (" + userDetails.agreed + ")";
                    } else {
                        $scope.showValidation = true;
                    }
                };
                $scope.message = "Ready";
                $scope.getError = function (error) {
                    if (angular.isDefined(error)) {
                        if (error.required) {
                            return "Please enter a value";
                        } else if (error.email) {
                            return "Please enter a valid email address";
                        }
                    }
                };
            });
    </script>
    <style>
        form.validate .ng-invalid-required.ng-dirty {
            background-color: lightpink;
        }

        form.validate .ng-invalid-email.ng-dirty {
            background-color: lightgoldenrodyellow;
        }

        div.error {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="todoPanel" class="panel col-xs-3" ng-controller="studyCtrl">
        <form name="myForm" novalidate ng-submit="addNewUser(newUser)" ng-class="showValidation ? 'validate' : ''">
            <div class="well">
                <div class="form-group">
                    <label>Name:</label>
                    <input name="userName" type="text" class="form-control" required ng-model="newUser.name">
                </div>
                <div class="form-group">
                    <label>Email:</label>
                    <input name="userEmail" type="email" class="form-control" required ng-model="newUser.email">
                    <div class="error" ng-show="showValidation">
                        {{getError(myForm.userEmail.$error)}}
                    </div>
                </div>
                <button type="submit" class="btn btn-primary btn-block">
                    OK
                </button>
            </div>
        </form>
    </div>
</body>
</html>
</code>

====Пользовательская валидация====
Создать свою собственную функцию проверки немного сложнее; Вы должны добавить новую директиву в ваше приложение и обрабатывать данные внутри нее.

===Пример===

Создайте свою собственную директиву, содержащую пользовательскую функцию проверки, и обратитесь к ней с помощью **my-directive**.\\
Поле будет действительным, только если значение содержит символ «е»:
<code html>
<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>

<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        if (value.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        }
        return value;
      }
      mCtrl.$parsers.push(myValidation);
    }
  };
});
</script>
</code>

В HTML новая директива будет указываться с помощью атрибута **my-directive**.\\
В JavaScript мы начинаем с добавления новой директивы **myDirective**.\\
Помните, что при именовании директивы вы должны использовать имя дела верблюда, myDirective, но при его вызове вы должны использовать разделенное имя, **my-directive**.\\
Затем верните объект, в котором вы указываете, что нам требуется **ngModel**, то есть ngModelController.\\
Создайте функцию связывания, которая принимает несколько аргументов, где четвертый аргумент, **mCtrl**, это **ngModelController**,\\
Затем укажите функцию, в данном случае с именем **myValidation**, которая принимает один аргумент, этот аргумент является значением входного элемента.\\
Проверьте, содержит ли значение букву «e», и установите допустимость контроллера модели на **true** или **false**.\\
Наконец, **mCtrl.$Parsers.push(myValidation);** добавит функцию **myValidation** в массив других функций, которые будут выполняться каждый раз, когда изменяется входное значение.

====Пример валидации====

<code html>
 <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">Username is required.</span>
  </span>
</p>

<p>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</span>
  </span>
</p>

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
  $scope.user = 'John Doe';
  $scope.email = 'john.doe@gmail.com';
});
</script>

</body>
</html> 
</code>

<note>
Атрибут HTML-формы **novalidate** используется для отключения проверки браузера по умолчанию.
</note>

Директива AngularJS **ng-model** связывает входные элементы с моделью.\\
Объект модели имеет два свойства: **user** и **email**.\\
Из-за **ng-show** диапазоны с color: red отображаются только тогда, когда пользователь или электронная почта имеют значение **$dirty** и **$invalid**.