Primer formulario en Angular

Ahora sí. Vamos a crear nuestro primer formulario en Angular. Tras haber hecho, en el artículo anterior, un repaso general de la estructura de una aplicación, ya estamos preparados para afrontar esta parte del desarrollo.

Empezaremos con un formulario muy simple, pero que nos permitirá introducir algunos conceptos básicos. Veremos como preparamos un formulario en la vista, como mostramos algunos datos predefinidos en campos de dicho formulario y, lo más importante, empezaremos a ver como comunicamos el contenido del formulario con la lógica del componente. Esta comunicación puede ser en dos sentidos: pasando datos de la lógica a la vista, y/o de la vista a la lógica.

Con este artículo sentaremos las bases de como debe crearse un formulario en un componente Angular. Será muy simple, pero nos iniciará para seguir aprendiendo y profundizando en artículos posteriores.

EL FORMULARIO EN HTML

Vamos a empezar por el principio. Al igual que cuando hacemos una web «picando» código directamente (sin Angular), los formularios se construyen con HTML. Dentro del contexto Angular, se siguen construyendo en HTML, aunque con más prestaciones que los formularios clásicos. Realmente, los campos siguen siendo los mismos, aunque algunos conceptos y formas de «hacer las cosas» cambian de forma significativa. Vamos a empezar por ver como creamos un formulario muy sencillo, y a extraer conocimientos concretos de él. Para ello nos vamos al componente Form01Component, que hemos creado para esto, e incluimos el formulario en el form01.component.html:

Si pruebas tu aplicación y accedes al primer formulario (que es la única opción que, por ahora, tenemos en el submenú de formularios), verás que se te carga el formulario en la página. Aún no hace nada, pero ahí está el formulario que hemos programado en HTML. Veamos las primeras peculiaridades.

Lo primero que tal vez te llame la atención está en la línea 3. Hemos abierto la etiqueta form, y no le hemos especificado ni método, ni destino, ni nada. Bueno. De momento, no lo necesitamos y, en muchos casos, no llegaremos a necesitarlo nunca (en otros, tal vez sí, pero serán los menos). El por qué de no necesitar definir estas propiedades tiene mucho que ver, evidentemente, con la forma en que se procesan los formularios en Angular. Lo empezaremos a entender en este artículo, y lo veremos muy claramente cuando aprendamos a conectar nuestra aplicación con servidores que deban recibir los datos del formulario (para esto último aún nos falta, no te agobies).

Lo siguiente que debería llamarnos la atención de alguna manera es la forma de definir los elementos del formulario. Tenemos dos campos donde el usuario puede teclear (uno de tipo text y otro de tipo password), y un botón, definidos, respectivamente en las líneas 5, 9 y 12. Observa que los elementos no llevan atributo id y, en su lugar, tienen el identificativo precedido del signo #. Dado que, en HTML «normal» el atributo id es para manipular el campo desde JavaScript, y que en el contexto Angular esta manipulación la haremos desde el archivo TypeScript del componente, usamos la notación de Angular para identificar los elementos. Esta notación no es nueva. Cuando hablamos de directivas ya la mencionamos para identificar los elementos ng-template (puedes repasarlo en este artículo). Aquí, la usamos para referenciar lso campos desde el TypeScript.

CONECTANDO DE LA LÓGICA A LA VISTA

Vamos a ver como podemos conectar la vista con la logica, para pasar datos de la lógica a la vista. Esto se hace mediante la técnica de binding de propiedades, que ya conocemos de un artículo anterior. Observa una modificación en el HTML:

Como ves, a los campos de texto les hemos añadido el atributo [placeholder] (así, entre cochetes, lo que indica que espera recibir «algo» de la lógica e interpretarlo). En la lógica del componente (form01.component.ts) debemos definir los placeholders que vamos a pasarle a los campos, así:

Observa en las líneas resaltadas como hemos definido un objeto llamado placeholders, con dos propiedades: una llamada username y otra llamada userpass, que son las que incluimos mediante binding en la vista. Grába los cambios en ambos elementos y verás el resultado en tu navegador.

CONECTANDO DE LA VISTA A LA LÓGICA, Y VUELTA

Así como para pasar datos de la lógica a la vista usamos el binding de propiedades, para desencadenar un proceso en la lógica desde la vista usamos el binding de eventos, que conocimos en este artículo. En este ejemplo, vamos a hacer que, al pulsar el botón, el contenido de los campos se muestre como un texto en la vista, por lo que también tendremos que volver a usar el binding de propiedades. De esta forma, veremos una comunicación total entre la vista y la lógica. Esta vez vamos a empezar por ver la lógica, en form01.component.ts:

Observa las líneas resaltadas. Empezamos declarando dos variables, que luego recibirán los datos tecleados en el formulario. Inicialmente las declaramos vacías, y públicas para que sean accesibles desde la vista. Lo hacemos en las líneas 10 y 11.

NOTA. Ya sé que te he comentado que es una buena práctica de programación usar nombres de variables en inglés. Sin embargo, como este curso está todo en español, y destinado, por tanto, a personas hispanohablantes, en ocasiones me permito ciertas licencias que, desde luego, en un proyecto real no me permitiría. Espero que seas un poco tolerante con mis pequeños caprichos.  😉

Lo siguiente que vemos es en las líneas de la 20 a la 23. Se define una función, que por estar dentro de la clase Form01Component es un método de esta clase. Lo que hace es recibir los campos del formulario y asignar sus valores a las variables que habíamos declarado previamente. El método se llama recibirDatos.

Sin embargo, aún nos faltan dos cosas: un desencadenante para que se ejecute el método, y una forma de visualizar los datos en la vista. Ambas cosas se montan, precisamente, en dicha vista (form01.component.html):

En primer lugar, observa la línea 15. Hacemos que el botón, al ser pulsado (evento click) desencadene el método recibirDatos, pasándole los dos campos del formulario. Observa que le pasa los campos identificándolos por el id que recibieron con el signo #. Esta forma de trabajar no pasa el valor del campo, si no todo el campo como un objeto. Por esta razón en el método se extrae la propiedad value, que es lo que nos interesa. Para desecadenar el método usamos la técnica de binding de eventos.

En las líneas 20 a 22 comprobamos si ambas propiedades tienen un valor mayor que una cadena vacía (que es el valor que recibían por defecto). Si es el caso, mostramos los valores en la vista. En caso contrario mostramos un mensaje indicando que falta uno o los dos datos. Este condicional sigue la sintaxis que aprendimos a desarrollar en este artículo. Sin embargo, ahora vamos un paso más allá, al supeditar la condición a dos condiciones simples unidas mediante el operador &&. Como ves, la sintaxis de Angular nos da cada vez más posibilidades.

Y ya lo tenemos. Ahora, cuando cargues esta vista, verás, inicialmente, el mensaje que te indica que faltan datos. Cumplimenta los dos datos del formulario y pulsa el botón, y verás que el mensaje cambia, mostrándote los datos que hayas tecleado.

CONCLUYENDO

En este artículo hemos aprendido a montar un formulario (muy simple, pero formulario, al fin y al cabo) en un componente. También hemos aprovechado para repasar algunos conceptos, como el binding de propiedades, el binding de eventos, y la directiva condicional. Toma nota (y esta idea es importante) de que, realmente, el binding de propiedades es una forma de pasar datos de la lógica a la vista (lo que se llama, coloquialmente, «hacia arriba») y el binding de eventos es un modo de pasar datos de la vista a la lógica (coloquialmente, «hacia abajo»).

Lo cierto es que esto funciona, pero es tosco y rudimentario. Angular nos permite programar lo mismo con mejores prácticas de programación, de una forma más elegante, desacoplada y mantenible, más acorde con el espíritu de Angular. Ahora que ya empezamos a estar familiariados con esto, en el próximo artículo aprenderemos a hacerlo mucho mejor.

La aplicación, en su estado actual, te la puedes descargar en este enlace.

   

Deja un comentario