Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular 2+
Code

Validación de formulario Angular con formularios reactivos y controlados por plantillas

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Lina (you can also view the original English article)

En este tutorial exploraremos los formularios reactivos y controlados por plantilla en Angular. Verás cómo crear cada tipo y cómo realizar validación en Angular 6.

Formularios reactivos y controlados por plantillas

¿Qué son los formularios reactivos Angular?

Los formularios reactivos también se conocen como formularios controlados por plantillas. Esto significa que el contenido HTML cambia según el código en el componente.

¿Qué son los formularios controlados por plantillas Angular?

Los formularios controlados por plantillas son impulsados por derivados en la plantilla. Esto significa que verás derivados como ngModel en la plantilla en lugar del código.

Diferencias entre formularios impulsados por plantillas y reactivos

  • Los formularios dirigidos por plantillas usan FormsModule, mientras que los formularios reactivos usan ReactiveFormsModule.
  • Los formularios controlados por plantillas son asíncronos, mientras que los formularios reactivos son sincrónicos.
  • En los formularios controlados por plantillas, la mayor parte de la interacción se produce en la plantilla, mientras que en los formularios controlados por reactivos, la mayor parte de la interacción se produce en el componente.

Ventajas y desventajas de los formularios controlados por  plantillas

Aunque los formularios de plantilla son más fáciles de crear, se convierten en un desafío cuando se quieren hacer pruebas unitarias, porque las pruebas requieren la presencia de un DOM.

Ventajas y desventajas de los formularios reactivos

Es más fácil escribir pruebas unitarias en formularios reactivos, ya que todo el código de formulario y la funcionalidad están contenidos en el componente. Sin embargo, los formularios  reactivos requieren más implementación de codificación en el componente.

Crear y validar formularios Angular

En esta sección, veremos cómo crear y validar ambos tipos de formularios. En ambos casos, crearemos un formulario de contacto donde los usuarios pueden enviar datos. Comenzaremos creando una aplicación Angular con dos componentes de la siguiente manera:

Cómo crear una plantilla de formulario

La plantilla de formulario básico será la siguiente:

A continuación, agregaremos el derivado ngModel a todos los campos como se muestra. Esto es necesario para vincular los campos de entrada a las propiedades del modelo de datos.

Luego agregamos los derivados ngForm y ngSubmit. ngForm se activa cuando el usuario hace clic en el botón enviar, mientras que ngSubmit especifica qué función ejecutar cuando se envía el formulario.

Luego, importaremos FormsModule desde @angular/forms en app.module.ts para activar los formularios controlados por plantilla.

Cuando un usuario ingresa y envía datos y hace clic en el botón Enviar, necesitamos recibir los datos en la clase de componente. Aquí, simplemente registramos los resultados en la consola.

También puedes ver los datos enviados en tiempo real cuando se escriben valores en el formulario.

Nuestro formulario ahora está completo y puedes comenzar a realizar las pruebas navegando a http://localhost:4200/template.

template form

Validación de formulario de plantilla Angular

Veamos cómo podemos agregar funciones avanzadas como la validación a nuestro formulario. En este caso, vamos a utilizar algunos validadores incorporados que incluyen:

  • required : el control de formulario no debe tener un campo vacío.
  • MinLength: el control de formulario debe tener un valor de la longitud mínima especificada.
  • MaxLength: el control de formulario debe tener un valor de la longitud máxima especificada.
  • pattern: el valor de control de formulario debe coincidir con un valor regex dado.

Empezamos añadiendo el atributo required a todos los campos de entrada.

El botón de envío se validará mediante el uso de la propiedad disabled, que se establecerá en true si el formulario es válido.

Nuestro formulario de trabajo ahora debe verse como se muestra a continuación. Como puedes ver, el botón Enviar está deshabilitado si no se rellenan todos los campos, y los campos también están marcados con un asterisco para mostrar que son obligatorios.

template form validation

Creando Formularios Reactivos Angular

Los formularios reactivos Angular también se conocen como formularios dirigidos por modelos. Emplean una técnica en la que los formularios se diseñan en el componente y luego se realizan los enlaces para el HTML. También hacen uso de las siguientes clases disponibles en el módulo ReactiveFormsModule.

  • FormGroup
  • FormControl
  • FormBuilder

Sólo necesitamos el FormBuilder API para crear nuestro formulario, ya que nuestro formulario no es complejo. Comenzaremos por importar el módulo en la clase de componente.

FormBuilder facilita el andamiaje, especialmente cuando se construyen formularios complejos. Usaremos el método group() disponible en FormBuilder para crear la instancia  FormGroup y luego agregar controles de formulario como un objeto.

Luego lo inyectaremos en el constructor mediante inyección de dependencia.

Usemos ahora FormBuilder para construir nuestros modelos de formulario. Actualiza reactiveforms.component.ts para que se vea así:

En el código anterior, usamos la API de FormBuilder y agregamos nuestros campos de formulario en un objeto. Ahora podemos implementar la plantilla como un formulario regular. La única diferencia es que tenemos que decirle a Angular cual formGroup usar.

El último bit será implementar la función que decide qué sucede cuando se envía el formulario.

Ahora que nuestro formulario está completo, podemos comenzar a probar. Ve a http://localhost:4200/reactive y, a medida que escribes valores para los campos de entrada, los valores deben aparecer debajo del formulario como se muestra a continuación.

reactive form

Validación De Formulario Reactivo en Angular

Aún debemos agregar validación a nuestros formularios para asegurarnos de que los usuarios no dejen campos vacíos o ingresen el formato de datos incorrecto.

Primero importaremos el módulo Validatorsen el componente. Luego, el módulo se agrega en los campos formGroup.

Queremos que todos nuestros campos sean obligatorios, por lo que actualizaremos nuestros campos con la etiqueta formControlName, que atiende los cambios en el valor del control.

¡Eso es todo lo que se necesita! Nuestra validación de formulario reactivo Angular ahora está funcionando, como se muestra a continuación.

reactive forms validation

Conclusión

Este tutorial ha cubierto todos los aspectos básicos de la creación y validación de formularios Angular. Pruébalo y quizás incluso quieras crear tus propias validaciones personalizadas.

El código fuente completo de estos proyectos de ejemplo se puede encontrar en nuestro repositorio de GitHub.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.