AngularJS
Проверка формы

Базовая проверка формы

Одной из сильных сторон Angular является проверка на стороне клиента.

Работа с традиционными входными формами и необходимость использования вопросительной обработки в стиле jQuery может быть трудоемкой и сложной. Угловой позволяет вам легко создавать профессиональные интерактивные формы.

Директива ng-model обеспечивает двустороннюю привязку с полями ввода, и обычно атрибут novalidate также помещается в элемент формы, чтобы браузер не выполнял встроенную проверку.

Таким образом, простая форма будет выглядеть так:

<form name="form" novalidate>
  <label name="email"> Your email </label>
  <input type="email" name="email" ng-model="email" />
</form>

Для Угловой проверки входов используйте тот же синтаксис, что и обычный элемент ввода , за исключением добавления атрибута ng-model, чтобы указать, какую переменную нужно привязать к области. Электронная почта отображается в предыдущем примере. Чтобы проверить число, синтаксисом будет:

<input type="number" name="postalcode" ng-model="zipcode" />

Окончательные шаги по базовой проверке формы - это подключение к функции представления формы на контроллере с помощью ng-submit , вместо того, чтобы разрешать отправку формы по умолчанию. Это необязательно, но обычно используется, поскольку входные переменные уже доступны в области видимости и поэтому доступны для вашей функции отправки. Как правило, хорошей практикой является предоставление формы имени. Эти изменения приведут к следующему синтаксису:

<form name="signup_form" ng-submit="submitFunc()" novalidate>
  <label name="email"> Your email </label>
  <input type="email" name="email" ng-model="email" />
  <button type="submit">Signup</button>
</form>

Этот выше код является функциональным, но есть и другие функции, которые предоставляет Angular.

Следующим шагом будет понять, что Angular присоединяет атрибуты класса с использованием ng-pristine , ng-dirty , ng-valid и ng-invalid для обработки формы. Использование этих классов в вашем css позволит вам создать допустимые / недействительные и нетронутые / грязные поля ввода и таким образом изменить презентацию, когда пользователь вводит данные в форму.

Формы и исходные состояния

Угловые формы и входы имеют различные состояния, которые полезны при проверке содержимого

Входные государства

Все вышеперечисленные состояния являются логическими свойствами и могут быть либо истинными, либо ложными.

С их помощью очень легко отображать сообщения пользователю.

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

Здесь мы используем директиву ng-show для отображения сообщения пользователю, если они изменили форму, но это недействительно.

Классы CSS

Угловой также предоставляет некоторые классы CSS для форм и входных данных в зависимости от их состояния

Вы можете использовать эти классы для добавления стилей в свои формы

input.ng-invalid {
  background-color: crimson;
}
input.ng-valid {
  background-color: green;
}

ngMessages

ngMessages используется для улучшения стиля отображения сообщений проверки в представлении.

Традиционный подход

Прежде чем ngMessages , мы обычно показываем сообщения проверки с использованием предустановленных директив ng-class Angular. Этот подход был мусором и repetitive задачей.

Теперь, используя ngMessages мы можем создавать собственные собственные сообщения.

пример

Html:

<form name="ngMessagesDemo">
  <input name="firstname" type="text" ng-model="firstname" required>
  <div ng-messages="ngMessagesDemo.firstname.$error">
    <div ng-message="required">Firstname is required.</div>
  </div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-messages.min.js"></script>

JS:

var app = angular.module('app', ['ngMessages']);

app.controller('mainCtrl', function ($scope) { 
    $scope.firstname = "Rohit";
});

Проверка пользовательской формы

В некоторых случаях базовой проверки недостаточно. Угловая поддержка пользовательской проверки, добавляющая функции $validators объекту $validators ngModelController на ngModelController :

angular.module('app', [])
  .directive('myValidator', function() {
    return {
      // element must have ng-model attribute
      // or $validators does not work
      require: 'ngModel',
      link: function(scope, elm, attrs, ctrl) {
        ctrl.$validators.myValidator = function(modelValue, viewValue) {
            // validate viewValue with your custom logic
            var valid = (viewValue && viewValue.length > 0) || false;
            return valid; 
        };
      } 
    };

Валидатор определяется как директива, которая требует ngModel , поэтому для применения валидатора просто добавьте настраиваемую директиву в элемент управления формы ввода.

<form name="form">
  <input type="text" 
         ng-model="model" 
         name="model" 
         my-validator>
  <pre ng-bind="'my-validator returned: ' + form.model.$valid"></pre>
</form> 

И my-validator не обязательно должен применяться для управления собственной формой. Это могут быть любые элементы, если они являются ng-model в своих атрибутах. Это полезно, если у вас есть пользовательский компонент сборки ui.

Вложенные формы

Иногда желательно встраивать формы, чтобы логически группировать элементы управления и логические элементы на странице. Однако формы HTML5 не должны быть вложенными. Вместо этого угловые принадлежности представляют собой ng-form .

<form name="myForm" noValidate>
  <!-- nested form can be referenced via 'myForm.myNestedForm' -->
  <ng-form name="myNestedForm" noValidate>
    <input name="myInput1" ng-minlength="1" ng-model="input1" required />
    <input name="myInput2" ng-minlength="1" ng-model="input2" required />
  </ng-form>

  <!-- show errors for the nested subform here -->
  <div ng-messages="myForm.myNestedForm.$error">
    <!-- note that this will show if either input does not meet the minimum -->
    <div ng-message="minlength">Length is not at least 1</div>
  </div>
</form>

<!-- status of the form -->
<p>Has any field on my form been edited? {{myForm.$dirty}}</p>
<p>Is my nested form valid? {{myForm.myNestedForm.$valid}}</p>
<p>Is myInput1 valid? {{myForm.myNestedForm.myInput1.$valid}}</p>

Каждая часть формы вносит вклад в состояние общей формы. Поэтому, если один из входов myInput1 был отредактирован и является $dirty , его содержащая форма также будет $dirty . Это каскадирует каждую содержащую форму, поэтому оба myNestedForm и myForm будут $dirty .

Асинхронные валидаторы

Асинхронные валидаторы позволяют проверять информацию о форме на вашем бэкэнд (используя $ http).

Эти валидаторы необходимы, когда вам нужно получить доступ к хранимой на сервере информации, которую вы не можете иметь на своем клиенте по разным причинам, например, к таблице пользователей и другой информации о базе данных.

Чтобы использовать асинхронные валидаторы, вы $asyncValidators к ng-model вашего input и определяете функции обратного вызова для свойства $asyncValidators .

Пример:

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

ngModel.$asyncValidators.usernameValidate = function (name) {               
     if (name) {
          return AuthenticationService.checkIfNameExists(name); // returns a promise
     } else {
          return $q.reject("This username is already taken!"); // rejected promise
     }
};

Теперь каждый раз, когда ng-model ввода изменяется, эта функция запускается и возвращает обещание с результатом.