Как проверить действительность формы с помощью angularjs?

Question 1

Я новичок в angularjs. Скажем, у моего приложения есть форма. Используя инспектор, я заметил, что если angularjs считает, что форма недействительна, он добавляет в форму класс ng-invalid. Прекрасно.

Итак, кажется, что для проверки правильности формы мне нужно засорить свой код селектором JQuery ?! Каким способом angularjs указать действительность формы без использования контроллера формы?

Question 2

Когда вы помещаете <form>тег внутрь вашего ngApp, AngularJS автоматически добавляет контроллер формы (на самом деле существует директива, которая называется formдобавлением необходимого поведения). Значение атрибута name будет привязано к вашей области; так что что-то вроде <form name="yourformname">...</form>удовлетворит:

Форма - это экземпляр FormController. Экземпляр формы при желании может быть опубликован в области с помощью атрибута name.

Итак, чтобы проверить правильность формы, вы можете проверить значение $scope.yourformname.$validсвойства области.

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

Question 3

пример

<div ng-controller="ExampleController">
  <form name="myform">
   Name: <input type="text" ng-model="user.name" /><br>
   Email: <input type="email" ng-model="user.email" /><br>
  </form>
</div>

<script>
  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

     //if form is not valid then return the form.
     if(!$scope.myform.$valid) {
       return;
     }
  }]);
</script>

Question 4

Вы также можете использовать myform.$invalid

Например

if($scope.myform.$invalid){return;}

Question 5

форма

директива в модуле ng Директива, которая создает экземпляр FormController.

Если указан атрибут name, контроллер формы публикуется в текущей области под этим именем.

Псевдоним: ngForm

В Angular формы могут быть вложенными. Это означает, что внешняя форма действительна, если также действительны все дочерние формы. Однако браузеры не допускают вложения элементов, поэтому Angular предоставляет директиву ngForm, которая ведет себя идентично, но может быть вложенной. Это позволяет иметь вложенные формы, что очень полезно при использовании директив проверки Angular в формах, которые динамически генерируются с помощью директивы ngRepeat. Поскольку вы не можете динамически генерировать атрибут name входных элементов с помощью интерполяции, вам нужно обернуть каждый набор повторяющихся входных данных в директиву ngForm и вложить их во внешний элемент формы.

CSS классы

ng-valid устанавливается, если форма действительна.

ng-invalid устанавливается, если форма недействительна.

ng-pristine устанавливается, если форма остается безупречной.

ng-dirty устанавливается, если форма грязная.

ng-submit устанавливается, если форма была отправлена.

Имейте в виду, что ngAnimate может обнаруживать каждый из этих классов при добавлении и удалении.

Отправка формы и предотвращение действия по умолчанию

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

По этой причине Angular предотвращает действие по умолчанию (отправку формы на сервер), если для элемента не указан атрибут действия.

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

директива ngSubmit в элементе формы

Директива ngClick для первой кнопки или поля ввода типа submit (input [type = submit])

Чтобы предотвратить двойное выполнение обработчика, используйте только одну из директив ngSubmit или ngClick.

Это связано со следующими правилами отправки формы в спецификации HTML:

Если форма имеет только одно поле ввода, то нажатие ввода в этом поле запускает отправку формы (ngSubmit), если форма имеет 2+ поля ввода и нет кнопок, или input[type=submit]нажатие ввода не запускает отправку, если форма имеет одно или несколько полей ввода и одна или несколько кнопок или input[type=submit]нажатие клавиши Enter в любом из полей ввода вызовет обработчик щелчка на первой кнопке или input[type=submit](ngClick) и обработчик отправки во включающей форме (ngSubmit).

Любые ожидающие изменения ngModelOptions вступят в силу сразу после отправки формы-оболочки. Обратите внимание, что события ngClick будут происходить до обновления модели.

Используйте ngSubmit, чтобы получить доступ к обновленной модели.

app.js :

angular.module('formExample', [])
  .controller('FormController', ['$scope', function($scope) {
    $scope.userType = 'guest';
  }]);

Форма :

<form name="myForm" ng-controller="FormController" class="my-form">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span>
  userType = {{userType}}
  myForm.input.$valid = {{myForm.input.$valid}}
  myForm.input.$error = {{myForm.input.$error}}
  myForm.$valid = {{myForm.$valid}}
  myForm.$error.required = {{!!myForm.$error.required}}
 </form>

Источник: AngularJS: API: форма