Formularios con materialize

Si bien bootstrap nos permite darle ciertos estilos a los campos de los formularios, materialize es una librería mucho más elaborada en ese sentido. Nos permite construir formularios con campos dotados de etiquetas dinámicas y otros pequeños recursos que, usados en conjunto y de la forma adecuada, mejoran enormenente la experiencia del usuario.

En este artículo vamos a integrar un formulario que no será enviado a ninguna parte, ni haremos nada con él. Simplemente veremos como puede llegar a quedar, cuando empleamos este framework css en nuestra aplicación. Lo de enviar los datos a una API ya lo hemos visto en varias ocasiones y no nos aporta nada nuevo. Además, nos distraería de lo que aquí pretendemos.

Construir un formulario al estilo de Google Material Design es extremadamente fácil y rápido, y aporta un impacto visual que hace nuestra web muy atractiva.

CREAR EL PROYECTO

Por rutina, vamos a empezar, como es habitual, creando el proyecto:

ng new ang6-matforms -p a6mf --routing true

Ahora, instalamos jQuery y materialize, y los referenciamos en angular.json.

npm install jquery --save
npm install materialize-css@next

Por último, en index.html, añadimos la línea que ya conocemos:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

CREANDO EL FORMULARIO

Cómo sólo vamos a tener un formulario, para ver como funciona, lo vamos a poner en AppComponent, para que se cargue al inicio. No vamos a reproducir aquí el código, porque no aporta nada nuevo, desde el punto de vista estrictamente de Angular. Lo que sí nos aporta es ver las posibilidades que tenemos de construir un formulario elegante con materialize. Incluso, podemos cambiar algunos aspectos, como los colores de los elementos que deseemos, mediante CSS, tal como podrás ver en el listado de app.component.css.

Los estilos que ofrece materialize para los distintos campos de formularios van, como podrás ver cuando ejecutes la aplicación, mucho más alla de lo que nos ofrece bootstrap. Además, son extremadamente fáciles de usar. El equipo de desarrollo de materialize css se han esforzado muchísimo para ofrecernos las máximas facilidades a la hora de crear nuestros formularios y, francamente, me parece que es una opción a tener muy en cuenta. Si no estás familiarizado con el uso de esta herramienta, te sugiero que visites la documentación de los distintos campos de formulario en la web oficial de materialize (https://materializecss.com/). Quedarás gratamente sorprendido de su potencia, flexibilidad y facilidad de implementación. Son tres características que no suelen ir juntas, pero con materialize lo han hecho perfecto.

INCOMPATIBILIDADES

Después que nos hemos asomado a algunas de las posibilidades de materialize, y tras haber visto en su documentación que hay muchas más, y todo el partido que se le puede sacar a este framework CSS, seguro que se te ha pasado por la cabeza lo mismo que a mí: que sería estupendo poder emplear, en una misma aplicación Angular, ambos frameworks css (materialize y bootstrap). Así podríamos tener lo mejor de ambos mundos, y coger herramientas de uno u otro, según nos conviniera en cada caso.

Desafortunadamente, esto no es posible. Muchas clases y componentes javascript tienen los mismos nombres, y entran en colisión, impidiendo el funcionamiento de cualquier cosa que hagamos, por simple que sea. Quizá, en futuras versiones, para evitar este problema, dejen de competir entre ellos pero, a día de hoy, esto es lo que hay. Tienes que elegir. Ahí no puedo aconsejarte. Ya conoces los dos, y es tu criterio personal. No todo iban a ser siempre buenas noticias. Como yo digo a menudo, lo que sirve para todo, no vale para nada.

CONCLUYENDO

Materialize nos ofrece la posibilidad de crear formularios extremadamente gratificantes para el usuario. En este enlace tienes una aplicación Angular con un formulario así creado. Como puedes comprobar, ambos frameworks se integran perfectamente.