Validar campos con angularJs.

Bienvenidos a este nuevo post, donde  aprenderemos a usar unas de las muchas formas de validar  un formulario simple con el Framework AngularJs.

Para este ejemplo vamos a validar el formulario usando un botón de tipo ‘submit’, al final de los campos Y dejando la etiqueta de form, solo con la propiedad name  y el atributo novalidate de HTML5.

Dato interesante; Con el atributo novalidate de HTML5, le indicamos a el formulario que no se valide por este método.

Bueno manos a la obra, en el siguiente ejemplo de el HTML que se muestra a continuación tenemos un formulario, con 3 campos de ejemplo:

<div ng-app="validaForm">
  <div ng-controller="FormularioValidate">
    
    <form name="formBusqueda" novalidate>
      <div>
        Nombre: <input type="text" name="nombre" ng-model="nombre" required ng-minlength="5" ng-class="(formBusqueda.nombre.$invalid && formBusqueda.nombre.$dirty) ? 'borderRed' : ''"/>
      </div>
      
      <br>
      
      <div>
        Apellidos: <input type="text" name="apellidos" ng-model="apellido" required ng-minlength="5" ng-class="(formBusqueda.apellidos.$invalid && formBusqueda.apellidos.$dirty) ? 'borderRed' : ''"/>
      </div>
      
      <div>
        Genero:
        <select name="genero" ng-model="genero" required ng-class="(formBusqueda.genero.$invalid && formBusqueda.genero.$dirty) ? 'borderRed' : ''">
         <option value="">Seleccione</option>
          <option value="1">Hombre</option>
          <option value="2">Mujer</option>
        </select>
        
      </div>

       <button type="submit" ng-click="guardarDatos(formBusqueda)">Guardar</button>
      
    </form>
    
    
  </div>
</div>
  1. Un campo de tipo text que sea requerido y con un minio de 5 caracteres . Para que éste campo sea valido tiene que escribirse algo sobre él a demás de que el total de caracteres sea mayor a 5.
  2. Tenemos otro segundo campo con las mismas validaciones.
  3. El tercer campo es de tipo select para seleccionar el genero con dos posibles valores hombre con id 1 y mujer con id 2.

 

Todos los campos siempre deben de llevar el atributo ‘name’ con un propiedades no repetidas como por ejemplo se muestra en este ejemplo:

1.- Un campo de tipo text que sea requerido y con un minio de 5 caracteres . Para que éste campo sea valido tiene que escribirse algo sobre él a demás de que el total de caracteres sea mayor a 5.

2.- Tenemos otro segundo campo con las mismas validaciones.

3.- El tercer campo es de tipo select para seleccionar el genero con dos posibles valores hombre con id 1 y mujer con id 2.

Todos los campos siempre deben de llevar el atributo ‘name’ con un propiedades no repetidas como por ejemplo se muestra en este ejemplo: 
-> name="nombre"
-> name="apellidos"
-> name="genero"

Estos nombre declarados en los campo antes mencionados por el atributo “name”, se agruparan para enviarse y a su vez usarse del lado de nuestro controlador con el atrubuto “name” de la etiqueta FORM ‘formBusqueda’.

<form name="formBusqueda" novalidate>

Hay que poner atención en la etiqueta “FORM”,  con el name formBusqueda ya que este nos servirá para la validación,  en nuestro controlador.

Si nos fijamos bien tenemos una etiqueta de tipo “button” en nuestro HTML con un atributo "submit" que es donde se hará la acción para enviar el formulario con el evento ng-click, donde declaramos una función que estará en nuestro controlador, llamado guardarDatos() y le pasaremos como atributo “formBusqueda”.

<button type="submit" ng-click="guardarDatos(formBusqueda)">Guardar</button>

Tenemos igualmente en nuestros campos una validación de clases propias de angular, con dos propiedades recalcadas llamadas $invalid y $dirty, por cada campo.

Nombre: <input type="text" name="nombre" ng-model="nombre" required ng-minlength="5" ng-class="(formBusqueda.nombre.$invalid && formBusqueda.nombre.$dirty) ? 'borderRed' : ''"/>

Estas propiedades nos servirán para mostrarle a el usuario en el input un borde rojo, por cada campo con error.

$invalid será verdadero por defauld ya que se le puso como required, es decir que tenga un caracter el input.

$dirty será falso por defaul, ya que todavía no ha interactuado el usuario con el campo(input).

Si esta condición se cumple, si son verdadero las dos validaciones por cada campo el borde se colocara en rojo,

y si no simplemente se mostrara sin el borde.

Lo que queremos hacer es que cuando se de clic sobre el botón submit estos dos se vuelvan verdaderos siempre y cuando los campos no cumplan con las validaciones que se les configuraron.

Como vimos anteriormente ya por defual el $invalid será verdadero, pero $dirty es falso, ya que si el usuario no interactúa con los inputs(campo).

Aquí es donde va  donde va el punto de este tutorial “Una forma que encontré de validar”, no es quizás la mejor pero me ha funcionado, ha de haber muchas más y mejores, pero a mí me ayudo bastante, y es la que les voy a compartir.

Bueno ahora nos pasamos a el controlador, que tiene su app validaForm  y para este ejemplo ahí mismo el controlador FormularioValidate.

var app = angular.module('validaForm', []);
app.controller('FormularioValidate', ['$scope','$http', function($scope, $http){
  
  $scope.guardarDatos = function (form){

    if (form.$valid) {
      
      alert("Formulario validado correctaente");
      
      
    }else{
      angular.forEach(form.$error, function (value, key) {
        angular.forEach(value, function (field) {
          field.$dirty = field.$invalid;
        });
      });

    }
  };

Seguidamente una función que ya se esta invocando desde el HTML  guardarDatos() que recibe como parámetro el form de el formulario, el parámetro trae consigo todas las propiedades de el formulario como se muestra:

Pero nosotros vamos a poner mucha atención en: $error: {required: Array(3)}

Si miramos en la siguiente imagen los atributos $dirty: false, que como se comento que iba a llegar con el valor false debido a que no se ha interactuado y $invalid: true como verdadero ya que los campos se pusieron como required:

 

Lo que hay que hacer es pasar es el $dirty a verdadero cuando el usuario le de enviar a el formulario (submit), y como lo vamos hacer; con dos forEach de angular, unos para recorrer los errores de la validación de el formulario, y otro para recorrer las propiedades de los errores por ejemplo el valid y el minlength entre otros errores de validacion

angular.forEach(form.$error, function (value, key) {
        console.log(value);
        angular.forEach(value, function (field) {
          field.$dirty = field.$invalid;
        });
      });

Y ya para finalizar validamos que el formulario sea valido si no mostramos los errores.

angular.forEach(form.$error, function (value, key) {
        console.log(value);
        angular.forEach(value, function (field) {
          field.$dirty = field.$invalid;
        });
      });

Para mirar el ejemplo en funcionamiento TIENES QUE REGISTRARTE LO PUEDES HACER CON FACEBOOK.

Elder López Félix

Elder López Félix

Backend Developer | Python / Django - Javascript / AngularJs / Angular - 5

@Elderl23

0 Comentarios

Error message here!

Error message here!

Hide Error message here!

¿Perdiste tu contraseña? Por favor, introduzca su dirección de correo electrónico. Recibirás un enlace para crear una nueva contraseña.

Error message here!

Back to log-in

Close