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

Ответ 1

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

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

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

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

Ответ 2

Пример

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

Ответ 3

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

например.

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

Ответ 4

форма

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

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

Псевдоним: ngForm

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

классы CSS

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

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

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

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

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

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

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

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

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

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

ngSubmit для элемента формы

ngНажмите директива для первой кнопки или поля ввода типа submit (input [type = submit])

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

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

Если форма имеет только одно поле ввода, то нажатие в этом поле запускает форму submit (ngSubmit) если форма имеет 2+ поля ввода и никаких кнопок или input[type=submit], то нажатие кнопки не запускает отправку если форма имеет одно или несколько полей ввода и одну или несколько кнопок или input[type=submit], то нажатие на вход в любом из полей ввода вызовет обработчик кликов на первой кнопке или input[type=submit] (ngClick) и обработчик отправки на прилагаемом form (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: форма