Crear un Formulario con Angular 7 y Bootstrap 4 + Validación – Parte 2 (Final)

Tutoriales

Demo Github

Continuaremos con el Artículo Crear un Formulario con Angular 7 y Bootstrap 4 + Validación – Parte 1, en el artículo anterior desplegamos Angular y lo dejamos listo para crear nuestro formulario con Bootstrap y darle una validación, asimismo vamos a definir los campos que tendrá nuestro formulario, vamos con esta Segunda Parte.

Capítulos

Empezamos creando el Formulario con Bootstrap 4, para esto vamos a instalarlo, pero primero debemos instalar jQuery y Popper, son librerías requeridas por Bootstrap 4, ejecutamos los siguientes comandos en nuestra consola de comandos, recuerda ejecutar instalación por instalación, espera que termine una para iniciar la otra

Creación de la Vista

Ahora vamos crear el HTML con el Formulario, para esto abre el archivo app.component.html que se encuentra dentro de la carpeta src

Dentro del archivo app.component.html crearemos nuestra vista con el formulario html, primero creamos la capa o div con la clase container que sirve como contenedor para los elementos en Bootstrap 4, agregamos lo siguiente

Bien, ahora vamos a crear dentro del contenedor nuestro formulario HTML con los siguientes campos:

  • Nombres y Apellidos (Campo de Texto)
  • Email (Campo de Email)
  • Asunto (Campo de Texto)
  • Postre (Lista de Opciones)
  • Mensaje (Campo de tipo Texarea)

Agregamos los campos mencionados en el formulario

Puedes ver que en el formulario que hemos creado, hemos agregado dentro de la etiqueta form la directiva [formGroup] y (ngSubmit)

Cada directiva cumple una determinada tarea en el formulario:

[formGroup] = La usamos para validar todo el formulario o el grupo de elementos que hay dentro del formulario

(ngSubmit) = La usamos para hacer un evento de tipo Post

Asi mismo a cada campo en el formulario le agregamos la directiva ngClass para modificar la clase CSS si hay o no en la validación, submitted  es llamado debajo para ser evaluado con la directiva ngIf que si no hay datos en el campo entonces que muestre el mensaje de validación y pinte el texto con la clase invalid-feedback de Bootstrap 4, todo lo mencionado lo podemos apreciar en el campo Nombres y Apellidos a continuación

Para la mayoría de campos del formulario usamos las mismas directivas para validar el formulario.

Nuestro formulario o vista creada con Bootstrap 4 debería verse de la siguiente manera

Validación con Angular

Para validar el formulario vamos a trabajar con el archivo app.component.ts

Dentro de este archivo vamos a importar Component, OnInit de angular core, así mismo FormBuilder, FormGroup y Validator de Angular Forms

Definimos la etiqueta <app-root></app-root> de nuestro archivo HTML como el contenedor para nuestra aplicación Angular y usamos el archivo app.component.html en donde se encuentra nuestro formulario HTML

Declaramos la variable contacto, submitted y título, las cuales llamamos y usamos en nuestra vista HTML.

Usamos el hook ngOnInit en donde validaremos los campos de nuestro formulario a continuación

Puedes ver que para el campo mensaje restringimos con Validators.minLength(6) para que el usuario escriba al menos 6 letras como mínimo para que el campo sea aceptado.

Por último creamos la función onSubmit() para validar y mostrar un mensaje cuando todos los campos del formulario hayan sido ingresados correctamente

Veamos todo el código completo de nuestro archivo app.component.ts

Ahora debemos de enlazar nuestra aplicación con todos los módulos que usaremos, para esto abre el archivo app.module.ts

Dentro del archivo app.module.ts importaremos los siguientes modulos

Paso seguido declaramos en nuestro decorador @NgModule la clase de nuestra aplicación AppComponent, los módulos que importamos y Bootstrap

Eso es todo si abrimos nuestro proyecto en el servidor local ejecutando el siguiente comando

Accedemos a la ruta con el puerto 4200 http://localhost:4200/  deberiamos poder ver nuestro formulario con la validación respectiva

Puedes ver el el resultado final en la Demo que esta al inicio de este artículo.

Notas

  • Los pasos, librerías, módulos, etc. pueden cambiar en futuras versiones de Angular y Bootstrap, esto no depende nosotros si no de los desarrolladores que dan soporte a estos Frameworks.
  • Si te es complicado seguir el tutorial, puedes descargar el código fuente desde el  repositorio Github.

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required