Содержание

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

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

Required

Используйте атрибут 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>

E-mail

Используйте атрибут 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>

Form State and Input State

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

Все они являются свойствами полей ввода и имеют значение 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>

CSS Classes

AngularJS добавляет классы CSS к формам и полям ввода в зависимости от их состояний.

Следующие классы добавляются или удаляются из полей ввода:

Следующие классы добавляются или удаляются из форм:

Классы удаляются, если значение, которое они представляют, равно 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>

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

отображение сообщений о невалидности пользовательского ввода это хороший тон но существует два подхода для отображения сообщений: 1й когда ввод валидируется после каждого действия пользователя и 2й данные валидируются после нажатия на кнопку submit

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

Пользовательская валидация

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

Пример

Создайте свою собственную директиву, содержащую пользовательскую функцию проверки, и обратитесь к ней с помощью 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>
Атрибут HTML-формы novalidate используется для отключения проверки браузера по умолчанию.

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