Como Validar un Formulario con Angular 16 + Bootstrap 5 – Parte 2 (Final)

6 minuto(s)

Demo Github

En la parte anterior llamada Como Validar un Formulario con Angular 16 + Bootstrap 5 – Parte 1, realizamos los primero pasos para el desarrollo de este proyecto. Creamos un nuevo proyecto con Angular 16, asimismo, antes de continuar verificamos que el proyecto este funcionando y concluimos instalando Bootstrap para la vista con el formulario HTML. En esta segunda terminaremos aprendiendo a Como Validar un Formulario con Angular 16 + Bootstrap 5, vamos con ello. 

Partes

  • Parte 1
  • Parte 2 (Final – Código Fuente GitHub) 
Aplicación creada con el Framework Angular
En Angular la creación de un nuevo proyecto es un poco más rápida

Antes de continuar, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Si No Tienes Experiencia Para Un Puesto De Trabajo, Créala !” y “4 Errores Que Pueden Arruinar Tu Carrera Como Desarrollador” (Anchor Podcast): 

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts
Podcast: 4 Errores Que Pueden Arruinar Tu Carrera Como Desarrollador

Continuemos con el Post: Como Validar un Formulario con Angular 16 + Bootstrap 5 – Parte 2 (Final).

Vista HTML (Formulario)

Para crear el formulario HTML usaremos el archivo app.component.html que se encuentra en formulario-angular7-bootstrap4 > src > app > app.component.html:


Abro el archivo app.component.html y agrego el siguiente formulario:


Para este tutorial, el formulario HTML tiene 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)

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

A cada campo en el formulario le agregamos la directiva ngClass para modificar la clase CSS durante 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 5, 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 5 debería verse de la siguiente manera:

Formulario HTML
Formulario HTML creado con Angular 16 y Bootstrap 5

Validación del Formulario

Para validar el formulario vamos a usar el archivo app.component.ts que se encuentra en formulario-angular7-bootstrap4 > src > app > app.component.ts:


Abro el archivo app.component.ts y agrego lo siguiente:


Paso seguido debemos enlazar nuestra aplicación con todos los módulos que usaremos, para esto abro el archivo app.module.ts que se encuentra en formulario-angular7-bootstrap4 > src > app > app.module.ts:


Abro el archivo app.modulet.ts y agrego lo siguiente:


Con ello, estamos listo, si abrimos nuestro proyecto en el servidor local ejecutando el siguiente comando:


Abrimos la ruta https://localhost:4200/ en el navegador y deberiamos poder ver nuestro formulario con su validación correctamente:

Validando un formulario HTML con Angular 16
Validación reactiva de un formulario en Angular

Conclusión

En este tutorial que consta de 2 partes has aprendido a Como Validar un Formulario con Angular 16 + Bootstrap 5, aprender a hacerlo te servirá como base para crear validaciones más avanzadas o complejas. Hemos usado un formulario reactivo angular o un formulario dinamico angular para el ejemplo. Los formularios reactivos en Angular son formularios dinamicos angular, es decir validan al momento en que el usuario ingrese un dato en un campo del formulario, la validación es instantánea y lo hace angular formulario dinamico.

Nota(s)

  • 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.
  • Si buscas una validación más avanzada puedes optar por usar la Validar Formulario con Angular – v1.1.0 que se encuentra en nuestra store
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

 

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