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

Используйте атрибут HTML5, необходимый для указания того, что поле ввода должно быть заполнено:

 <form name="myForm">
  <input name="myInput" ng-model="myInput" required>
</form>
 
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1> 

Используйте атрибут HTML5, чтобы указать, что значение должно быть электронной почтой:

<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> 

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

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

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

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

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

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

Показать сообщение об ошибке, если на поле сфокусировались и оставили его пустым:

 <input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span> 

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:

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

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

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

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

Создайте свою собственную директиву, содержащую пользовательскую функцию проверки, и обратитесь к ней с помощью my-directive.
Поле будет действительным, только если значение содержит символ «е»:

<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>

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

 <!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> 

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