Empezamos en este artículo una nueva sección del curso de Angular 5. Vamos a aprender a crear y usar formularios en nuestras aplicaciones Angular. Después de todo, ¿qué aplicación web no incluye formularios? Aunque sólo sea un mero formulario de contacto, para que nuestro visitantes se pongan en contacto con nosotros, al menos tendremos ese. Si la aplicación es un poco compleja o aspiracional, seguro que necesitaremos más.

La implementación de formularios en vistas de una aplicación Angular puede parecer un poco más compleja que la inserción de un formulario en bruto en HTML (y lo es). A cambio, nos permite unas prestaciones muy interesantes, a nivel de validación de datos, comunicaciones en tiempo real entre la vista y la lógica del componente, etc.

En esta sección empezaremos viendo los formularios desde lo más simple, formularios minimalistas hasta lo patético, hasta las prestaciones más interesantes que nos pueda ofrecer Angular al respecto. Además, cuando se tercie, según el desarrollo de los artículos, aprovecharemos para repasar conocimientos que ya hemos adquirido anteriormente en el curso, así como para ir introduciendo ampliaciones de los mismos o conceptos nuevos que, si bien, no sean exclusiva o específicamente de formularios, sí encajen bien y nos permitan aprender y progresar como desarrolladores de frontend con Angular.

Y basta de cháchara introductoria. Vamos a ello.

CREANDO LA APLICACIÓN

Vamos a empezar creando una aplicación nueva, para no mezclar lo que aprendermos a partir de ahora con lo que ya teníamos, a fin de no recargar innecesariamente el código. Después de todo, estas aplicaciones tienen fines meramente didácticos.

ng new angular-myforms -p amf --routing true

ATENCIÓN. Hemos llamado a la aplicación angular-myforms, en lugar de, simplemente, forms, porque dentro del propio Angular ya existe un módulo con ese nombre y, como ya he comentado en alguna ocasión, tratamos de evitar colisiones de nombres.

Como ya sabes, tras un breve lapso de tiempo, se habrá creado el directorio con toda la estructura base de la aplicación. Abrimos el VSC, abrimos la carpeta de la aplicación, y en el package.json editamos la línea del ng serve para agregarle las opciones --aot y -o. Esto es como lo hemos hecho siempre, y no tiene nada nuevo.

LA ESTRUCTURA BASE DE LA APLICACIÓN

Nos crearemos un módulo para almacenar los formularios que vayamos creando a lo largo de este y los siguientes artículos. Lo llamaremos MyForms:

ng g m MyForms --routing

Como ves, lo creamos con su propio sistema de enrutamiento, lo que nos permitirá cargarlo de forma perezosa.

También vamos a crear un módulo para elementos comunes, o generales, que no tengan, a priori, cabida «lógica» en otra parte de la aplicación. Lo llamaremos commons (como ya hicimos en el ejecicio de la sección anterior). Esta vez lo crearemos sin enrutador propio. Los componentes de este módulo deberán cargarse de forma directa.

ng g m commons

Dentro de commons crearemos un componente para la barra de navegación (navbar), otro para la cabecera (header) y un componente para la vista principal de la aplicación (home). También crearemos un componente para la vista derivada de los errores de tipo 404, al que llamaremos notFoundComponent. Los cuatro los haremos exportables.

ng g c commons/navbar --export
ng g c commons/header --export
ng g c commons/home --export
ng g c commons/notFound --export

Además (y esto recuérdalo porque es de una importancia extrema), en la lógica del módulo debemos importar el RouterModule, que «vive» en @angular/router. No importa que hayamos creado nuestro módulo CommonsModule sin enrutamiento interno. Debemos importar RouterModule por una razón. Entre los componentes de este módulo va la barra de navegación (NavbarComponent). Como ya sabemos, los enlaces no se construyen con la propiedad href de HTML, sino con la propiedad routerLink de Angular. Pues bien. Si no importamos el RouterModule en la lógica del módulo, la propiedad routerLink no funcionará. En concreto, el archivo commons.module.ts debe quedarnos así:

MUCHA ATENCIÓN. Aún a riesgo de hacerme cansino, insisto en la importancia de esta fase. Si no, no te funcionarán los enlaces.

IMPORTANDO CommonsModule EN AppModule

Para dejar preparadas todas las importaciones, y dado que CommonsModule tiene componentes que deberán ser visibles desde AppModule, es necesario importar el primero en el segundo. Además, ya que vamos a tocar app.module.ts, importaremos, como ya aprendimos a hacer en este artículo, la notación en español para números, fechas, etc. Nos queda así:

Observa que lo importamos en las líneas de la 5 a la7, y en la 10, y añadimos el CommonsModule a la propiedad declarations del decorador, en la línea 19. Si estás usando VSC correctamente configurado, con que lo añadas a declarations ya te hace la importación automáticamente.

EL ENRUTADOR RAÍZ

Este es otro elemento que tenemos que modificar. Tenemos el componente HomeComponent, que tendrá la vista de inicio y se cargará en directo, y el módulo MyFormsModule, que hemos creado con su propio enrutador, y se cargará en diferido (por carga perezosa). Para terminar, el NotfoundComponent se cargará cuando se teclee una ruta que no se encuentre en la matriz Routes. En concreto, app-routing-module.ts nos queda así:

EL ENRUTAMIENTO DE MyFormsModule

Para poder crear una estructura mínima, vamos a generar un componente, llamado Form01Component, en el módulo MyFormsModule, así:

ng g c MyForms/form01

Será el que empleemos en el primer formulario de ejemplo que crearemos en esta aplicación aunque, por ahora, lo vamos a crear «en bruto», es decir, sin contenido específico alguno.

Y, como es lógico, vamos a iniciar el enrutamiento interno del módulo (my-forms-routing.module.ts), sólo para «irlo dejando preparado»:

INSTALANDO LIBRERÍAS EXTERNAS

Instalaremos jQuery y Bootstrap, como ya sabemos:

npm install --save jquery
npm install --save bootstrap@3

Ahora vamos a instalar la librería de JavaScript moment.js, que usaremos en algunos formularios:

npm install --save moment

En package.json se deben haber creado las siguientes líneas:

"jquery": "^3.3.1",
"bootstrap": "3.3.7",
"moment": "^2.22.1",

ATENCIÓN. Te preguntarás acerca de por qué hemos instalado bootstrap 3, en lugar de bootstrap 4, que lleva ya bastante tiempo en el mercado, y es un producto maduro y estable. La razón es muy sencilla. Existen algunas incompatibilidades entre Angular 5 y Bootstrap 4. A la hora de incorporar determinados elementos o de poner la aplicación en producción, surgen incompatibilidades que dan gran cantidad de problemas, obligándonos, incluso, a modificar elementos del CLI a mano, cosa que no es, en modo alguno, aceptable. En la parte del curso dedicada a actualizar a Angular 6, donde detallaremos las diferencias y mejoras en la nueva versión, aprenderemos a integrar bootstrap 4.

En .angular-cli.json modificaremos las claves styles y scripts para que queden así:

Observa que los CSS de bootstrap los incluímos antes de los estilos de la aplicación. De este modo, cuando lo deseemos, podremos sobrescribir las clases originales de bootstrap, para modificar el aspecto de nuestra web.

LOS HTML

Llegados a este punto, vamos a modificar los HTML de los componentes para poner un rótulo relevante de lo que hacen, o la mecánica básica necesaria.

HomeComponent Y NotFoundComponent

Estos son los más simples. Ya los adornaremos si llega el caso pero, por ahora, con lo mínimo ya basta:

HeaderComponent

Como ya tenemos bootstrap, a esta vista vamos a darle un toque un «pelín» más visual:

NavbarComponent

Esta vista ya tiene un poco más de materia, ya que vamos a crear una barra de navegación de bootstrap.

AppComponent

Aquí tenemos que eliminar el código que aparece por defecto al crear la aplicación, e insertar los elementos comunes a todo el sitio, así:

LOS ESTILOS GENERALES DEL SITIO

Aprovechando que los estilos generales del sitio (styles.css) los hemos incluido después de los de los de bootstrap en .angular-cli.json, vamos a retocarlos un poco, para que nos quede esto algo más aparente:

ATENCIÓN: Observa que, como hemos dicho, estamos sobrescribiendo, parcialmente, algunas clases de bootstrap. Esto es muy habitual en desarrollos web. Sea cual sea el framework CSS que emplees (bootstrap, materialize, milligram, o el que sea), será muy fácil que, por tu diseño, tengas que sobrescribir algunas de las clases tipificadas por el framework. Por esta razón, si te fijas en el fichero .angular-cli.json verás que cargamos es CSS de bootstrap antes de los estilos globales de la aplicación. Si lo hiciéramos al revés, no podríamos sobrescribir las clases. En la aplicación anterior no lo hicimos así, pero aquí ya vamos a empezar a cuidar más esos detalles.

CONCLUYENDO

Cerramos este artículo aquí, para no hacerlo demasiado largo y recargado. Hemos aprovechado para repasar conceptos previso, matizando y ampliando algunos detalles:

• Creamos la aplicación «en bruto».
• Creamos una estructura mínima de módulos y componentes.
• Nos aseguramos de importar RouterModule en la lógica de los módulos donde vamos a tener enlaces. De momento es uno solo (CommonsModule), pero podrían ser más. En MyFormsModule no es necesario preocuparnos de esto porque, en primer lugar, no está previsto usar enlaces ahí y, sobre todo, porque si nos hace falta, como es un módulo con enrutamiento interno, ya nos hace las importaciones necesarias en el archivo de dicho enrutamiento (my-forms-routing.module.ts).
• Creamos el enrutador raíz (el de AppModule) y el de MyFormsModule.
• Instalamos las librerías externas que vamos a usar en la aplicación (si más adelante necesitamos alguna otra, ya la instalaremos).
• Preparamos básicamente las vistas y los estilos generales del sitio.

En el próximo artículo construiremos nuestro primer formulario en Angular. El estado inicial de la aplicación, tal como la tenemos en este momento, te lo dejo en este enlace.