some image

Codes and Tags

Validar formulario en angularJS

Etiquetas: , Blog, Web No comments
AngularJS Logo

AngularJS Validando Formularios

Esta es una validación de un formulario en angularJS, basicamente consiste en verificar la property $valid del formulario que estamos utilizando y aplicar algunos estilos para algunas directivas de angular. Pero bueno, empezaré por el principio.

1. Creando el formulario

  • Al momento de realizar nuestras validaciones con angular es necesario quitar la validación que hace el navegador utilizando el atributo novalidate sobre el elemento form de html.
  • Utilizar la directiva de angular ng-submit, para decirle a angular cuál será la validación que queremos realizar y qué sucederá al momento de enviar nuestro formulario.
  • Si queremos mostrar mensajes especificos de validación, podemos utilizar también el atributo $error, del campo que estamos llenando o validando, teniendo en cuenta que es necesario previamente haber utilizado la directiva ng-model.

A continuación colocaré el código HTML de mi formulario.

Thank you for send us your information!

 

2. Creando la lógica en JavaScript

En este ejemplo, he creado un metodo llamado addUser(), el cuál una vez todos los datos del formulario se encuentran validados correctamente, en este método puedo hacer lo que considere necesario, como por ejemplo guardar mi usuario, agregar a un array de objetos, etc…

(function(){
    var app = angular.module('signUpExample',[]);

    app.controller('signUpController', function(){
        this.user = {};
        this.submitted = false;
        this.addUser = function(){
            users.push(this.user);
            this.user = {};
            this.submitted = true;
        };
    });
})();

3. Agregando estilos.

Para que los campos tengan el efecto de que son validados en tiempo real, angularJS a medida que valida cada campo adiciona y cambia classes de estilos css, así que para resaltar cuando un campo se encuentra correctamente, es necesario sobreescribir los estilos a continuación.

.ng-invalid.ng-dirty{
    border-color:red;
}

.ng-valid.ng-dirty{
    border-color:green;
}

4. Resultado

Aquí puedes ver el demo funcionando.

angularValidacionForm1 angularValidacionForm2 angularValidacionForm3 angularValidacionForm4

5. Código Fuente

 

Git Logo

Código en GitHub

About Edwin Torres

Related Posts

  • JavaScript Logo
  • AngularJS Logo
  • JavaScript 5
  • JavaScript 5

Add your comment