AngularJS (11) Validaciones

Posted by On enero 21, 2015 1 Comment

Una vez que hemos visto los formularios hay que validarlos, ya que ahora mismo podíamos poner en nuestros campos de texto lo que quisiéramos, por ello son muy importantes las validaciones.

Por suerte mucho del trabajo, lo que incluye algunas expresiones regulares, esta ya incluido en el propio html5, donde poniendo el tipo de input se determina que es lo que tiene que introducirse, incluso pudiendo establecer expresiones regulares desde el código html5

Además angular puede ayudar en este proceso, pero de todas formas hay que tener en cuenta que las validaciones en cliente no son lo suficientemente seguras y se deben de comprobar en el lado del servidor.

Veamos el ejemplo:

<!DOCTYPE html>
<html>
<body>

<h2>Ejemplo de validación</h2>

<div ng-app="" ng-controller="validateCtrl" >

<form name="myForm" novalidate>
Nombre de usuario:
<input type="text" name="usuario" ng-model="usuario" required>
<span style="color:red" ng-show="myForm.usuario.$dirty &amp;&amp; myForm.usuario.$invalid">
<span ng-show="myForm.usuario.$error.required">El nombre de usuario es requerido.</span>
</span>
Email:
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty &amp;&amp; myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email requerido.</span>
<span ng-show="myForm.email.$error.email">La direccion de correo es incorrecta.</span>
</span>
<input type="submit" ng-disabled="myForm.usuario.$dirty &amp;&amp; myForm.usuario.$invalid ||   myForm.email.$dirty &amp;&amp; myForm.email.$invalid" ng-click="toggle()">
</form>

Nombre: {{usuario}}, email: {{email}}
</div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
function validateCtrl($scope) {
    $scope.usuario = 'Paco Perez';
    $scope.email = 'Paco.perez@gmail.com';
    $scope.mostrar = true;
    $scope.toggle = function() {
        $scope.mostrar = !$scope.mostrar;
    };
}
</script>

</body>
</html>

Cuando se ejecuta aparecen dos campos de texto los cuales tienen su propio tipo, a continuación aparece un span de color rojo que aparece solo si el texto cumple con las condiciones $dirty o $invalid, escogiendo dependiendo la condición que se cumpla.

El submit esta desactivado mientras que no este todo correcto, es decir mientras en el formulario no se cumplan las condiciones de todos los inputs, y una vez que este se activa al hacer click en el aparece el ultimo párrafo mostrando los datos.

En este ejemplo podemos ver como se realizan las validaciones básicas, mezclándolo con la directiva ng-disabled y trabajando además con los eventos, ya que cuando se hace click en un evento, aparece el texto con la directiva ng-hiden.

Con todo lo que hemos visto en este curso básico de Angular, seguro que se os ocurren muchas formas de aplicar estos conocimientos en futuros proyectos, espero que os sirvan y que hayais disfrutado con ellos, tanto como yo realizandolos.