¿Cómo verifico la validez del formulario con angularjs?

Soy muy nuevo en angularjs. Digamos que mi aplicación tiene un formulario. Usando el inspector, noté que si angularjs piensa que el formulario no es válido, agrega una clase ng-invalid al formulario. Encantador.

Entonces, ¿parece que para verificar si el formulario es válido, necesito contaminar mi código con el selector Jquery? ¿Cuál es la forma angularjs de indicar la validez del formulario sin usar un controlador de formulario?

Cuando coloca una <form>etiqueta dentro de su ngApp, AngularJS agrega automáticamente el controlador de formulario (en realidad, hay una directiva, llamada formque agrega comportamiento necesario). El valor del atributo de nombre estará vinculado a su alcance; así que algo como <form name="yourformname">...</form>satisfará:

Un formulario es una instancia de FormController. La instancia del formulario se puede publicar opcionalmente en el ámbito utilizando el atributo de nombre.

Entonces, para verificar la validez del formulario, puede verificar el valor de la $scope.yourformname.$validpropiedad del alcance.

Puede obtener más información en la sección de la Guía del desarrollador sobre formularios.

Ejemplo

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

También puedes usar myform.$invalid

P.ej

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

formar

• directiva en la directiva module ng que instancia FormController.

Si se especifica el atributo de nombre, el controlador de formulario se publica en el ámbito actual con este nombre.

Alias: ngForm

En Angular, los formularios se pueden anidar. Esto significa que el formulario externo es válido cuando todos los formularios secundarios también lo son. Sin embargo, los navegadores no permiten el anidamiento de elementos, por lo que Angular proporciona la directiva ngForm que se comporta de manera idéntica pero se puede anidar. Esto le permite tener formularios anidados, lo cual es muy útil cuando se usan directivas de validación angular en formularios que se generan dinámicamente usando la directiva ngRepeat. Dado que no puede generar dinámicamente el atributo de nombre de los elementos de entrada mediante la interpolación, debe envolver cada conjunto de entradas repetidas en una directiva ngForm y anidarlas en un elemento de formulario externo.

Clases CSS

ng-valid se establece si el formulario es válido.

ng-invalid se establece si el formulario no es válido.

ng-pristine se establece si la forma es prístina.

ng-sucio se establece si el formulario está sucio.

ng-enviado se establece si se envió el formulario.

Tenga en cuenta que ngAnimate puede detectar cada una de estas clases cuando se agregan y eliminan.

Enviar un formulario y evitar la acción predeterminada

Dado que el papel de los formularios en las aplicaciones angulares del lado del cliente es diferente al de las aplicaciones clásicas de ida y vuelta, es deseable que el navegador no traduzca el envío del formulario en una recarga de página completa que envíe los datos al servidor. En su lugar, se debe activar alguna lógica de JavaScript para manejar el envío del formulario de una manera específica de la aplicación.

Por esta razón, Angular evita la acción predeterminada (envío de formulario al servidor) a menos que el elemento tenga un atributo de acción especificado.

Puede utilizar una de las dos formas siguientes para especificar qué método de JavaScript debe llamarse cuando se envía un formulario:

Directiva ngSubmit en el elemento de formulario

Directiva ngClick en el primer botón o campo de entrada de tipo enviar (entrada [tipo = enviar])

Para evitar la doble ejecución del controlador, use solo una de las directivas ngSubmit o ngClick.

Esto se debe a las siguientes reglas de envío de formularios en la especificación HTML:

Si un formulario tiene solo un campo de entrada, al presionar enter en este campo se activa el envío de formulario (ngSubmit) si un formulario tiene más de 2 campos de entrada y no hay botones, o al presionar input[type=submit]enter no se activa el envío si un formulario tiene uno o más campos de entrada y uno o más botones o input[type=submit]luego presionar enter en cualquiera de los campos de entrada activará el controlador de clic en el primer botón o input[type=submit](ngClick) y un controlador de envío en el formulario adjunto (ngSubmit).

Cualquier cambio pendiente de ngModelOptions se llevará a cabo inmediatamente cuando se envíe un formulario adjunto. Tenga en cuenta que los eventos ngClick ocurrirán antes de que se actualice el modelo.

Utilice ngSubmit para tener acceso al modelo actualizado.

app.js :

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

Forma :

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

Fuente: AngularJS: API: formulario