Cuando trabajamos en construir aplicaciones de una sola página, uno de los puntos que podemos destacar es el ingreso de datos, este tipo de funcionalidad generalmente se hace con la utilización de un formulario, evidentemente si vamos a pedir datos de un usuario debemos validar que no vengan con errores.
Afortunadamente AngularJS posee algunos mecanismos internos que nos permiten hacer las validaciones de un modo sencillo, permitiendo de esta forma que solo se envíe el formulario cuando las condiciones del formato de los datos sean cumplidas.
Lo primero que vamos a necesitar es un formulario, vamos a colocar algunos campos, por ejemplo nombre, apellido y un campo de correo electrónico, generalmente, estos son los tipos de campos más utilizados y que nos van a dar la oportunidad de generar las validaciones. Veamos el código inicial que tenemos:
Si nos fijamos hemos utilizado características de HTML para validar los campos, por ejemplo colocando la propiedad required para campos requeridos, pensarán que esto solo funcionará en navegadores nuevos o compatibles con HTML5 solamente, pero cuando utilizamos AngularJS, este llenará validaciones alternativas si abrimos la aplicación en un navegador que no es compatible con HTML5.
Vemos que el campo de la edad tiene aparte de la validación del tipo, dos propiedades de AngularJS que son para la longitud del campo, esto hace que solo podamos colocar números entre 1 y 3 dígitos en total.
Hasta los momentos vamos bien con nuestro ejercicio, sin embargo aún debemos validar que para enviar los datos todo deba ser validado, para ello debemos generar un controlador que nos permita hacer esto, para ello vamos a indicarle al formulario que controlador va a utilizar, para ello vamos a cambiar la línea:
Por la siguiente:
Dentro del controlador podemos acceder a una propiedad llamada $valid, que es la que nos va a indicar si nuestro formulario es válido para poder hacer el envío de los datos, para ello debemos modificar la línea del botón de envío de datos con lo siguiente:
Realizando la modificación debería quedarnos de la siguiente manera:
Por último ya podemos crear nuestro controlador en AngularJS con el cual vamos a procesar nuestros datos:
Esto nos debe dar un resultado como el siguiente en nuestro navegador:
Vemos que como no hay datos el botón de enviar está desactivado, esto cambiará cuando llenemos los datos adecuados como vemos en la siguiente imagen:
Si hubiésemos colocado un email con un formato incorrecto, no se hubiese activado el botón, vemos entonces como AngularJS nos ha facilitado el desarrollo en algo tan sencillo como un formulario y con esto terminamos este tutorial, hemos podido validar un formulario de forma completa, únicamente utilizando propiedades de HTML5 y un poco de AngularJS.
Afortunadamente AngularJS posee algunos mecanismos internos que nos permiten hacer las validaciones de un modo sencillo, permitiendo de esta forma que solo se envíe el formulario cuando las condiciones del formato de los datos sean cumplidas.
Crear el formulario
Lo primero que vamos a necesitar es un formulario, vamos a colocar algunos campos, por ejemplo nombre, apellido y un campo de correo electrónico, generalmente, estos son los tipos de campos más utilizados y que nos van a dar la oportunidad de generar las validaciones. Veamos el código inicial que tenemos:
<h1>Registro</h1> <form name='agregarUsuarioForm'> <div>Nombre: <input ng-model='usuario.nombre' required></div> <div>Apellido: <input ng-model='usuario.apellido' required></div> <div>Email: <input type='email' ng-model='usuario.email' required></div> <div>Edad: <input type='number' ng-model='usuario.edad' ng-maxlength='3' ng-minlength='1'></div> <div><button>Enviar</button></div> </form>
Si nos fijamos hemos utilizado características de HTML para validar los campos, por ejemplo colocando la propiedad required para campos requeridos, pensarán que esto solo funcionará en navegadores nuevos o compatibles con HTML5 solamente, pero cuando utilizamos AngularJS, este llenará validaciones alternativas si abrimos la aplicación en un navegador que no es compatible con HTML5.
Vemos que el campo de la edad tiene aparte de la validación del tipo, dos propiedades de AngularJS que son para la longitud del campo, esto hace que solo podamos colocar números entre 1 y 3 dígitos en total.
Agregar el controlador
Hasta los momentos vamos bien con nuestro ejercicio, sin embargo aún debemos validar que para enviar los datos todo deba ser validado, para ello debemos generar un controlador que nos permita hacer esto, para ello vamos a indicarle al formulario que controlador va a utilizar, para ello vamos a cambiar la línea:
<form name='agregarUsuarioForm'>
Por la siguiente:
<form name='agregarUsuarioForm' ng-controller="AgregarUsuarioController">
Dentro del controlador podemos acceder a una propiedad llamada $valid, que es la que nos va a indicar si nuestro formulario es válido para poder hacer el envío de los datos, para ello debemos modificar la línea del botón de envío de datos con lo siguiente:
<div><button>Enviar</button></div>
Realizando la modificación debería quedarnos de la siguiente manera:
<button ng-disabled='!agregarUsuarioForm.$valid'>Enviar</button>
Por último ya podemos crear nuestro controlador en AngularJS con el cual vamos a procesar nuestros datos:
function AgregarUsuarioController($scope) {
$scope.mensaje = '';
$scope.agregarUsuario = function () {
$scope.mensaje = 'Gracias, ' + $scope.usuario.nombre + ',ha sido agregado!';
};
}
Esto nos debe dar un resultado como el siguiente en nuestro navegador:
Vemos que como no hay datos el botón de enviar está desactivado, esto cambiará cuando llenemos los datos adecuados como vemos en la siguiente imagen:
Si hubiésemos colocado un email con un formato incorrecto, no se hubiese activado el botón, vemos entonces como AngularJS nos ha facilitado el desarrollo en algo tan sencillo como un formulario y con esto terminamos este tutorial, hemos podido validar un formulario de forma completa, únicamente utilizando propiedades de HTML5 y un poco de AngularJS.
Desde cuando los campos de un formulario se separan entre si por divs? utiliza labels para obtener una mayor claridad en el formulario.
No utilizas ng-app?
El botón de enviar no se desactiva, el acceso al $valid no parece correcto, por lo que podemos observar que no carga la función de AgregarUsuarioController, ya que no lanza el mensaje.
Es necesario que dejes el codigo completo y no utilices una imagen para "probar" que te funciona, cuando la realidad es que no.
Gracias.