AngularJS
Validación de formularios

Validación básica de formularios

Una de las fortalezas de Angular es la validación de la forma del lado del cliente.

Tratar con las entradas de formularios tradicionales y tener que usar el procesamiento de estilo jQuery interrogativo puede llevar mucho tiempo y ser complicado. Angular le permite producir formas interactivas profesionales con relativa facilidad.

La directiva ng-model proporciona un enlace bidireccional con campos de entrada y, por lo general, el atributo novalidate también se coloca en el elemento de formulario para evitar que el navegador realice una validación nativa.

Por lo tanto, una forma simple se vería así:

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

Para que Angular valide las entradas, use exactamente la misma sintaxis que un elemento de entrada regular, a excepción de la adición del atributo ng-model para especificar a qué variable vincular en el alcance. El correo electrónico se muestra en el ejemplo anterior. Para validar un número, la sintaxis sería:

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

Los pasos finales para la validación de formularios básicos se conectan a una función de envío de formularios en el controlador mediante ng-submit , en lugar de permitir que se realice el envío de formularios predeterminado. Esto no es obligatorio pero generalmente se usa, ya que las variables de entrada ya están disponibles en el alcance y, por lo tanto, están disponibles para su función de envío. También suele ser una buena práctica dar un nombre al formulario. Estos cambios darían lugar a la siguiente sintaxis:

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

Este código anterior es funcional pero hay otra funcionalidad que proporciona Angular.

El siguiente paso es comprender que Angular adjunta atributos de clase utilizando ng-pristine , ng-dirty , ng-valid y ng-invalid para el procesamiento de formularios. El uso de estas clases en su css le permitirá diseñar campos de entrada válidos / no válidos y prístinos / sucios , y alterar la presentación a medida que el usuario ingresa datos en el formulario.

Estados de forma y entrada

Las formas y entradas angulares tienen varios estados que son útiles al validar el contenido

Estados de entrada

Todos los estados anteriores son propiedades booleanas y pueden ser verdaderas o falsas.

Con estos, es muy fácil mostrar mensajes a un usuario.

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

Aquí, estamos usando la directiva ng-show para mostrar un mensaje a un usuario si ha modificado un formulario pero no es válido.

Clases de CSS

Angular también proporciona algunas clases de CSS para formularios y entradas dependiendo de su estado

Puedes usar estas clases para agregar estilos a tus formularios

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

ngMessages

ngMessages se usa para mejorar el estilo para mostrar mensajes de validación en la vista.

Enfoque tradicional

Antes de ngMessages , normalmente mostramos los mensajes de validación utilizando las directivas angulares predefinidas ng-class . Este enfoque fue basura y una tarea repetitive .

Ahora, al usar ngMessages podemos crear nuestros propios mensajes personalizados.

Ejemplo

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";
});

Validación de formularios personalizados

En algunos casos la validación básica no es suficiente. Validación personalizada de soporte angular que agrega funciones de $validators objeto $validators en el 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; 
        };
      } 
    };

El validador se define como una directiva que requiere ngModel , por lo que para aplicar el validador simplemente agregue la directiva personalizada al control de formulario de entrada.

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

Y my-validator no tiene que aplicarse en el control de forma nativo. Puede ser cualquier elemento, siempre que sea ng-model en sus atributos. Esto es útil cuando tienes algún componente ui de compilación personalizado.

Formularios anidados

A veces es conveniente anidar formularios con el fin de agrupar los controles y las entradas de forma lógica en la página. Sin embargo, los formularios HTML5 no deben estar anidados. Suministros angulares ng-form lugar.

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

Cada parte de la forma contribuye al estado general de la forma. Por lo tanto, si una de las entradas myInput1 ha sido editada y está $dirty , su formulario que contiene también será $dirty . Esto va en cascada a cada formulario que contiene, por lo que tanto myNestedForm como myForm serán $dirty .

Validadores asíncronos

Los validadores asíncronos le permiten validar la información del formulario contra su backend (utilizando $ http).

Este tipo de validadores son necesarios cuando necesita acceder a la información almacenada en el servidor que no puede tener en su cliente por varios motivos, como la tabla de usuarios y otra información de la base de datos.

Para usar los validadores asíncronos, acceda al ng-model de su input y defina las funciones de devolución de llamada para la propiedad $asyncValidators .

Ejemplo:

El siguiente ejemplo verifica si un nombre proporcionado ya existe, el backend devolverá un estado que rechazará la promesa si el nombre ya existe o si no se proporcionó. Si el nombre no existe, devolverá una promesa resuelta.

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

Ahora, cada vez que se cambia el ng-model de la entrada, esta función se ejecutará y devolverá una promesa con el resultado.