En este post voy a mostrar cómo crear un formulario aprovechando las ventajas de angularJS. Un formulario en angularjs es lo mismo que un formulario normal solo que podemos aprovechar las mejoras que nos ofrece este framework. La finalidad de este post es comprender un poco más el data binding y un comienzo en la validación de un formulario en angularjs.
Te recomiendo que eches un ojo al data binding antes de continuar ya que los inputs estarán relacionados con el modelo de datos «usuario». El ejemplo que voy a mostrar a va a consistir en un formulario de registro con 3 inputs de texto, un checkbox y un select. Además los campos de texto son obligatorios y el email que introduzca el usuario debe ser correcto.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div ng-app="miFormulario" ng-controller="miControlador"> <form name="registro"> <input type="text" placeholder="Nombre" name="nombre" ng-model="usuario.nombre" required> <br/> <input type="text" placeholder="Apellidos" name="apellidos" ng-model="usuario.apellidos" required> <br/> <input type="email" placeholder="Email" name="email" ng-model="usuario.email" required> <br/> <select name="preferencia" ng-model="usuario.preferencia"> <option value="">Cual es tu lenguaje favorito?</option> </select> <br/> <input ng-model="usuario.publicidad" type="checkbox" name="publicidad" id="publicidad" value="publicidad"/> <label for="publicidad">Deseo recibir ofertas a mi correo</label> <br/> <input type="submit" value="Registrarse"> </form> </div> |
En el formulario vemos características de HTML 5 como el atributo required, que asegura que ese campo esté completo, y el type=email que obliga al usuario a introducir una dirección de correo válida. Sin embargo, el select no tiene opciones para escoger ya que nos encargaremos de que las opciones se muestren vía Angularjs. Para ello crearemos un módulo con su respectivo controlador donde entre otras cosas, cargará las opciones del select.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
angular.module("miFormulario", []) .controller("miControlador", function ($scope) { $scope.usuario = {}; $scope.preferencias = [ { value: "css", label: "CSS" }, { value: "JavaScript", label: "JavaScript" }, { value: "PHP", label: "PHP"}, { value: "Java", label: "Java"} ]; }); |
En el controlador, gracias al objeto scope, hacemos que el preferencias esté disponible en la vista. De esta manera podemos pasar todos las opciones del select a la página. Sin embargo, tenemos que emplear la directiva ng-options sobre el select, dicha directiva obtendrá el objeto preferencias y las respectivas opciones que forman parte de este.
|
1 |
<select name="preferencia" ng-model="usuario.preferencia" ng-options="obj.value as obj.label for obj in preferencias"> |
La directiva ngOptions lo que haces es cómo mapear nuestro modelo de datos dentro del select. El array que tenemos en preferencias, contiene un set de atributos y AngularJS precisa saber que propiedades de ese set deberían ser el el value de la opción y cual el contenido visible del usuario. Es importante que en el mapeo, que los nombres de las propiedades sean las mismas tanto en el modelo como en la directiva. Por ejemplo, si tengo
|
1 |
ng-options="obj.valor as obj.lenguaje for obj in preferencias" |
en el modelo, las propidades deberían estar así
|
1 2 3 |
$scope.preferencias = [ { valor: "css", lenguaje : "CSS" }, ]; |
Otro punto de este formulario es el checkbox que nos permite indicar un si/no a la recepción de publicidad. Este check debería estar desactivado por defecto y para ello asignamos (data-binding) que el valor de dicho check dependa del modelo (usuario.publicidad).
|
1 2 3 |
$scope.usuario = {}; $scope.usuario.publicidad = false; |
Como en el controlador tiene false, automáticamente toma el valor correcto. Si queremos que este activado, habría que poner a true el objeto usuario.publicidad.
Finalmente cuando se submitee el formulario, se llamará a un función nombrada registro() que tratará todos los datos introducidos por el usuario validando cada campo (pero esto se tratará en el siguiente post). Para poder llamar a un función cuando se envía el formulario hay que emplearla a directiva ng-submit. Lo introducimos en la apertura del <form>
|
1 |
<form name="registrationForm" ng-submit="usuario.registro()"> |
Mientras en el controlador declaramos la función, por ahora vacía
|
1 2 3 4 |
$scope.usuario.registro= function () { <!-- Pendiente para el siguiente post --> } }); |
Y hasta aquí el formulario en Angularjs, espero que os haya gustado. A seguir picando 🙂