logoImagina
iconCurso
Te recomendamos nuestro curso de Angular 18
Descubre el curso de Angular 18
Ir al curso

Cómo hacer un Formulario Reactivo en Angular

iconImage
Publicado 07-03-2024
Actualizado el 25-06-2024
Duración: 35 min

Introducción

¡Bienvenidos al tutorial acerca de los formularios reactivos en Angular! Los formularios reactivos son una poderosa característica de Angular que nos permite manejar la lógica y la validación de los datos de manera eficiente y flexible.

Si deseas un tutorial más introductivo a este poderoso framework, puedes consultar nuestro tutorial de primeros pasos con Angular.

¿Qué son los formularios reactivos en Angular?

Los formularios reactivos son una forma de crear y gestionar formularios en Angular utilizando enfoques basados en modelos y observables. En contraste con los formularios basados en plantillas, los formularios reactivos nos permiten definir la estructura y el comportamiento de los formularios de manera programática.

En lugar de depender exclusivamente del enlace de datos unidireccional, los formularios reactivos utilizan una representación enriquecida del estado del formulario que se sincroniza automáticamente con los elementos del formulario en el HTML. Esto nos brinda mayor control y flexibilidad al manipular los datos del formulario.

Beneficios de utilizar formularios reactivos

El uso de formularios reactivos en Angular ofrece una serie de beneficios significativos:

  1. Mayor control y flexibilidad: Con los formularios reactivos, tenemos un control completo sobre la lógica del formulario y podemos realizar validaciones y acciones personalizadas de manera más sencilla.
  2. Validación más avanzada: Los formularios reactivos nos permiten implementar validaciones complejas y personalizadas, como validaciones condicionales o validaciones asíncronas.
  3. Gestión del estado del formulario: Podemos rastrear y gestionar el estado del formulario en tiempo real, lo que facilita la implementación de lógica basada en cambios de estado, como habilitar o deshabilitar botones según la validez del formulario.
  4. Reactividad y escalabilidad: Al utilizar el patrón observador-observable, los formularios reactivos nos permiten reaccionar automáticamente a los cambios en los datos del formulario y escalar la lógica del formulario a medida que crece nuestra aplicación.

Configuración del entorno

Antes de sumergirnos en la creación de formularios reactivos en Angular, necesitamos realizar algunas configuraciones iniciales en nuestro entorno de desarrollo. A continuación, te explicaré los pasos necesarios para configurar correctamente el entorno.

Requisitos previos antes de comenzar

Antes de comenzar, asegúrate de tener instalado lo siguiente en tu sistema:

  1. Node.js: Angular requiere Node.js, así que asegúrate de tener instalada la versión más reciente. Puedes verificar si tienes Node.js instalado ejecutando el siguiente comando en tu terminal:
1 node -v

Si no tienes Node.js instalado, puedes descargarlo e instalarlo desde el sitio web oficial de Node.js.

  1. Angular CLI: Angular CLI es una herramienta de línea de comandos que nos permite crear y administrar proyectos de Angular de manera eficiente. Para instalar Angular CLI, ejecuta el siguiente comando en tu terminal:
1 npm install -g @angular/cli

Esto instalará Angular CLI de forma global en tu sistema. Una vez que hayas verificado y cumplido con los requisitos previos, estaremos listos para crear nuestro proyecto de Angular.

Creación del proyecto

Para crear un nuevo proyecto de Angular, sigue estos pasos:

  1. Abre tu terminal y navega hasta la carpeta donde deseas crear tu proyecto.
  2. Ejecuta el siguiente comando para crear un nuevo proyecto de Angular:
1 ng new nombre-del-proyecto
Reemplaza `nombre-del-proyecto` con el nombre que desees para tu proyecto.
  1. Durante la creación del proyecto, Angular CLI te hará algunas preguntas opcionales, como si deseas agregar enrutamiento o estilos CSS predefinidos. Puedes seleccionar las opciones según tus necesidades.
  2. Una vez que se complete la creación del proyecto, navega hasta la carpeta del proyecto usando el siguiente comando:
1 cd nombre-del-proyecto

Con esto, hemos configurado correctamente nuestro entorno y creado un nuevo proyecto de Angular. Ahora, procederemos a crear el componente de formulario.

Creación del componente de formulario

En Angular, los componentes son la base fundamental para construir aplicaciones. Vamos a crear un componente específico para nuestro formulario reactivo. Sigue estos pasos:

  1. Ejecuta el siguiente comando en tu terminal para generar un nuevo componente llamado "formulario":
1 ng generate component formulario</code> </pre> 2Esto creará una carpeta llamada `formulario` con los archivos del componente dentro del directorio de tu proyecto. 32. Abre el archivo `formulario.component.ts` ubicado en la carpeta del componente y añade el siguiente código: 4<pre style="margin: 10px; color: #5c8fd0"> <code class=language-typescript> 5 import { Component, OnInit } from '@angular/core'; 6 import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 7 @Component({ 8 selector: 'app-formulario', 9 templateUrl: './formulario.component.html', 10 styleUrls: ['./formulario.component.css'] 11 }) 12 export class FormularioComponent implements OnInit { 13 formulario: FormGroup; 14 constructor(private formBuilder: FormBuilder) { } 15 ngOnInit(): void { 16 // Creamos el formulario reactivo con los campos y validaciones 17 this.formulario = this.formBuilder.group({ 18 nombre: ['', Validators.required], 19 email: ['', [Validators.required, Validators.email]], 20 telefono: ['', Validators.pattern('[0-9]{10}')], 21 }); 22 } 23 // Aquí irían los métodos para manejar el envío del formulario y las validaciones 24 }

En este código, hemos importado los módulos FormBuilder, FormGroup y Validators de @angular/forms. Luego, en el método ngOnInit(), creamos un formulario reactivo utilizando el formBuilder y definimos los campos del formulario con las respectivas validaciones. En este caso, tenemos un campo "nombre" que es requerido, un campo "email" que es requerido y debe ser un email válido, y un campo "telefono" que debe tener un formato de 10 dígitos.

  1. Abre el archivo formulario.component.html y añade el siguiente código:
1 <form [formGroup]="formulario" (ngSubmit)="enviarFormulario()"> 2 <div> 3 <label for="nombre">Nombre:</label> 4 <input type="text" id="nombre" formControlName="nombre"> 5 <!-- Mostramos el mensaje de error si el campo "nombre" es inválido y ha sido tocado --> 6 <div *ngIf="formulario.get('nombre').invalid && formulario.get('nombre').touched"> 7 <div *ngIf="formulario.get('nombre').errors.required" class="error">El nombre es requerido.</div> 8 </div> 9 </div> 10 <div> 11 <label for="email">Email:</label> 12 <input type="email" id="email" formControlName="email"> 13 <!-- Mostramos el mensaje de error si el campo "email" es inválido y ha sido tocado --> 14 <div *ngIf="formulario.get('email').invalid && formulario.get('email').touched"> 15 <div *ngIf="formulario.get('email').errors.required" class="error">El email es requerido.</div> 16 <div *ngIf="formulario.get('email').errors.email" class="error">El email no es válido.</div> 17 </div> 18 </div> 19 <div> 20 <label for="telefono">Teléfono:</label> 21 <input type="text" id="telefono" formControlName="telefono"> 22 <!-- Mostramos el mensaje de error si el campo "telefono" es inválido y ha sido tocado --> 23 <div *ngIf="formulario.get('telefono').invalid && formulario.get('telefono').touched"> 24 <div *ngIf="formulario.get('telefono').errors.pattern" class="error">El teléfono debe contener 10 dígitos.</div> 25 </div> 26 </div> 27 <button type="submit" [disabled]="formulario.invalid">Enviar</button> 28 </form>

En este código HTML, hemos enlazado el formulario reactivo a la directiva [formGroup]. Cada campo del formulario tiene su respectivo formControlName que coincide con los nombres de los campos definidos en el componente TypeScript. También hemos agregado mensajes de error condicionales utilizando la directiva *ngIf para mostrar los errores de validación según corresponda. Por ejemplo, si el campo "nombre" es inválido y ha sido tocado, se mostrará el mensaje de error "El nombre es requerido."

  1. Abre el archivo formulario.component.css y añade el siguiente código:
1 .error { 2 color: red; 3 font-size: 14px; 4 }
En este archivo CSS, hemos definido un estilo para los mensajes de error que se mostrarán cuando haya errores de validación en los campos del formulario. En este caso, hemos establecido el color rojo y un tamaño de fuente de 14px para los mensajes de error.

¡Excelente! Ahora hemos creado el componente de formulario en Angular, con la lógica del formulario y la estructura HTML necesaria. En el siguiente apartado, abordaremos cómo realizar la validación de datos y manejar el envío del formulario.

Creación de un formulario básico

En esta sección, aprenderemos a crear un formulario básico utilizando Angular y los formularios reactivos. Seguiremos los siguientes pasos:

Definición de campos y controles

  1. Abre el archivo formulario.component.ts y dentro de la clase FormularioComponent, añade las siguientes propiedades y comentarios:
1 import { Component, OnInit } from '@angular/core'; 2 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms'; 3 @Component({ 4 selector: 'app-formulario', 5 templateUrl: './formulario.component.html', 6 styleUrls: ['./formulario.component.css'] 7 }) 8 export class FormularioComponent implements OnInit { 9 formulario: FormGroup; 10 // Definición de los campos del formulario 11 nombreControl: FormControl; // Nuevo: Creamos un FormControl para el campo "nombre" 12 emailControl: FormControl; // Nuevo: Creamos un FormControl para el campo "email" 13 telefonoControl: FormControl; // Nuevo: Creamos un FormControl para el campo "telefono" 14 constructor(private formBuilder: FormBuilder) { } 15 ngOnInit(): void { 16 // Creación de los controles del formulario 17 this.nombreControl = new FormControl('', Validators.required); // Nuevo: Asignamos un FormControl al campo "nombre" con validación requerida 18 this.emailControl = new FormControl('', [Validators.required, Validators.email]); // Nuevo: Asignamos un FormControl al campo "email" con validaciones requerida y de email 19 this.telefonoControl = new FormControl('', Validators.pattern('[0-9]{10}')); // Nuevo: Asignamos un FormControl al campo "telefono" con validación de patrón 20 // Agrupación de los controles en el formulario 21 this.formulario = this.formBuilder.group({ 22 nombre: this.nombreControl, // Modificado: Asignamos el FormControl correspondiente al campo "nombre" 23 email: this.emailControl, // Modificado: Asignamos el FormControl correspondiente al campo "email" 24 telefono: this.telefonoControl, // Modificado: Asignamos el FormControl correspondiente al campo "telefono" 25 }); 26 } 27 // Aquí irían los métodos para manejar el envío del formulario y las validaciones 28 }

En este código, hemos agregado comentarios para indicar las partes que se han modificado. Hemos creado instancias de FormControl para cada campo del formulario (nombre, email y telefono) y les hemos asignado las respectivas validaciones.

Vinculación de los controles con el HTML

  1. Abre el archivo formulario.component.html y realiza los siguientes cambios:
1 <form [formGroup]="formulario" (ngSubmit)="enviarFormulario()"> 2 <div> 3 <label for="nombre">Nombre:</label> 4 <input type="text" id="nombre" [formControl]="nombreControl"> <!-- Modificado: Enlazamos el FormControl correspondiente al campo "nombre" --> 5 <!-- Mostramos el mensaje de error si el campo "nombre" es inválido y ha sido tocado --> 6 <div *ngIf="nombreControl.invalid && nombreControl.touched"> 7 <div *ngIf="nombreControl.errors.required" class="error">El nombre es requerido.</div> 8 </div> 9 </div> 10 <div> 11 <label for="email">Email:</label> 12 <input type="email" id="email" 13 [formControl]="emailControl"> <!-- Modificado: Enlazamos el FormControl correspondiente al campo "email" --> 14 <!-- Mostramos el mensaje de error si el campo "email" es inválido y ha sido tocado --> 15 <div *ngIf="emailControl.invalid && emailControl.touched"> 16 <div *ngIf="emailControl.errors.required" class="error">El email es requerido.</div> 17 <div *ngIf="emailControl.errors.email" class="error">El email no es válido.</div> 18 </div> 19 </div> 20 <div> 21 <label for="telefono">Teléfono:</label> 22 <input type="text" id="telefono" [formControl]="telefonoControl"> <!-- Modificado: Enlazamos el FormControl correspondiente al campo "telefono" --> 23 <!-- Mostramos el mensaje de error si el campo "telefono" es inválido y ha sido tocado --> 24 <div *ngIf="telefonoControl.invalid && telefonoControl.touched"> 25 <div *ngIf="telefonoControl.errors.pattern" class="error">El teléfono debe contener 10 dígitos.</div> 26 </div> 27 </div> 28 <button type="submit" [disabled]="formulario.invalid">Enviar</button> 29 </form>

Hemos agregado comentarios para indicar las partes que se han modificado. Ahora, los controles individuales (nombreControl, emailControl y telefonoControl) están enlazados con los campos del formulario mediante la propiedad [formControl]. Esto permite que los cambios en los controles se reflejen automáticamente en los campos y viceversa.

Descubre la formación a tu medida
Rellena el formulario para obtener más información sobre los cursos.
Tamaño de la empresa *
Términos y condiciones *

Validación avanzada de campos

En esta sección, aprenderemos a realizar una validación más avanzada en los campos del formulario utilizando Angular y los formularios reactivos. Seguiremos los siguientes pasos:

Validación de longitud, formato y valores específicos

  1. Abre el archivo formulario.component.ts y realiza los siguientes cambios:
1 import { Component, OnInit } from '@angular/core'; 2 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms'; 3 @Component({ 4 selector: 'app-formulario', 5 templateUrl: './formulario.component.html', 6 styleUrls: ['./formulario.component.css'] 7 }) 8 export class FormularioComponent implements OnInit { 9 formulario: FormGroup; 10 nombreControl: FormControl; 11 emailControl: FormControl; 12 telefonoControl: FormControl; 13 constructor(private formBuilder: FormBuilder) { } 14 ngOnInit(): void { 15 this.nombreControl = new FormControl('', [ 16 Validators.required, 17 Validators.minLength(3), // Validación de longitud mínima de 3 caracteres 18 Validators.maxLength(50) // Validación de longitud máxima de 50 caracteres 19 ]); 20 this.emailControl = new FormControl('', [ 21 Validators.required, 22 Validators.email, 23 Validators.pattern('[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}') // Validación de formato de email 24 ]); 25 this.telefonoControl = new FormControl('', [ 26 Validators.required, 27 Validators.pattern('[0-9]{10}'), 28 Validators.min(1000000000), // Validación de valor mínimo de 10 dígitos 29 Validators.max(9999999999) // Validación de valor máximo de 10 dígitos 30 ]); 31 this.formulario = this.formBuilder.group({ 32 nombre: this.nombreControl, 33 email: this.emailControl, 34 telefono: this.telefonoControl, 35 }); 36 } 37 // Aquí irían los métodos para manejar el envío del formulario y las validaciones 38 }

En este código, hemos agregado validaciones adicionales a los controles de los campos del formulario. Para el campo "nombre", hemos añadido las validaciones de longitud mínima y máxima utilizando Validators.minLength y Validators.maxLength. Para el campo "email", hemos añadido la validación de formato de email utilizando Validators.email y Validators.pattern. Para el campo "telefono", hemos añadido la validación de longitud exacta de 10 dígitos utilizando Validators.pattern, y también hemos agregado validaciones de valor mínimo y máximo utilizando Validators.min y Validators.max.

Uso de validadores personalizados

  1. Si deseas realizar una validación personalizada, puedes crear tu propio validador. Por ejemplo, vamos a crear un validador para verificar que el campo "nombre" no contenga caracteres especiales. Abre el archivo formulario.component.ts y realiza los siguientes cambios:
1 import { Component, OnInit } from '@angular/core'; 2 import { FormBuilder, FormGroup, Validators, FormControl, AbstractControl } from '@angular/forms'; 3 // Validador personalizado para verificar caracteres especiales 4 function noCaracteresEspeciales(control: AbstractControl): { [key: string]: any } | null { 5 const caracteresEspeciales = /[!@#$%^&*(),.?":{}|<>]/; 6 const tieneCaracterEspecial = caracteresEspeciales.test(control.value); 7 return tieneCaracterEspecial ? { caracteresEspeciales: true } : null; 8 } 9 @Component({ 10 selector: 'app-formulario', 11 templateUrl: './formulario.component.html', 12 styleUrls: ['./formulario.component.css'] 13 }) 14 export class FormularioComponent implements OnInit { 15 formulario: FormGroup; 16 nombreControl: FormControl; 17 emailControl: FormControl; 18 telefonoControl: FormControl; 19 constructor(private formBuilder: FormBuilder) { } 20 ngOnInit(): void { 21 this.nombreControl = new FormControl('', [ 22 Validators.required, 23 Validators.minLength(3), 24 Validators.maxLength(50), 25 noCaracteresEspeciales // Validador personalizado 26 ]); 27 this.emailControl = new FormControl('', [ 28 Validators.required, 29 Validators.email, 30 Validators.pattern('[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}') 31 ]); 32 this.telefonoControl = new FormControl('', [ 33 Validators.required, 34 Validators.pattern('[0-9]{10}'), 35 Validators.min(1000000000), 36 Validators.max(9999999999) 37 ]); 38 this.formulario = this.formBuilder.group({ 39 nombre: this.nombreControl, 40 email: this.emailControl, 41 telefono: this.telefonoControl, 42 }); 43 } 44 // Aquí irían los métodos para manejar el envío del formulario y las validaciones 45 }

Hemos creado una función noCaracteresEspeciales como validador personalizado. Esta función toma un control como argumento y verifica si contiene caracteres especiales utilizando una expresión regular. Si el control contiene caracteres especiales, devuelve un objeto con la propiedad caracteresEspeciales establecida en true, lo que indica que la validación ha fallado. En caso contrario, devuelve null, lo que indica que la validación ha sido exitosa.

Luego, hemos agregado noCaracteresEspeciales como una validación adicional al control del campo "nombre".

Mostrar mensajes de error al usuario

  1. Abre el archivo formulario.component.html y realiza los siguientes cambios:
1 <form [formGroup]="formulario" (ngSubmit)="enviarFormulario()"> 2 <div> 3 <label for="nombre">Nombre:</label> 4 <input type="text" id="nombre" [formControl]="nombreControl"> 5 <div *ngIf="nombreControl.invalid && nombreControl.touched"> 6 <div *ngIf="nombreControl.errors.required" class="error">El nombre es requerido.</div> 7 <div *ngIf="nombreControl.errors.minlength" class="error">El nombre debe tener al menos 3 caracteres.</div> 8 <div *ngIf="nombreControl.errors.maxlength" class="error">El nombre no puede tener más de 50 caracteres.</div> 9 <div *ngIf="nombreControl.errors.caracteresEspeciales" class="error">El nombre no puede contener caracteres especiales.</div> <!-- Nuevo: Mostramos mensaje de error personalizado --> 10 </div> 11 </div> 12 <div> 13 <label for="email">Email:</label> 14 <input type="email" id="email" [formControl]="emailControl"> 15 <div *ngIf="emailControl.invalid && emailControl.touched"> 16 <div *ngIf="emailControl.errors.required" class="error">El email es requerido.</div> 17 <div *ngIf="emailControl.errors.email" class="error">El email no es válido.</div> 18 <div *ngIf="emailControl.errors.pattern" class="error">El email no tiene el formato correcto.</div> 19 </div> 20 </div> 21 <div> 22 <label for="telefono">Teléfono:</label> 23 <input type="text" id="telefono" [formControl]="telefonoControl"> 24 <div *ngIf="telefonoControl.invalid && telefonoControl.touched"> 25 <div *ngIf="telefonoControl.errors.required" class="error">El teléfono es requerido.</div> 26 <div *ngIf="telefonoControl.errors.pattern" class="error">El teléfono debe contener 10 dígitos.</div> 27 <div *ngIf="telefonoControl.errors.min || telefonoControl.errors.max" class="error">El teléfono debe estar entre 1000000000 y 9999999999.</div> 28 </div> 29 </div> 30 <button type="submit" [disabled]="formulario.invalid">Enviar</button> 31 </form>

Hemos agregado un nuevo <div> dentro de cada campo del formulario para mostrar mensajes de error personalizados. Ahora, si un campo es inválido y ha sido tocado, se mostrará un mensaje de error correspondiente según el tipo de error. Por ejemplo, si el campo "nombre" contiene caracteres especiales, se mostrará el mensaje "El nombre no puede contener caracteres especiales". Esto proporciona una retroalimentación clara al usuario sobre los errores de validación y ayuda a mejorar la usabilidad del formulario.

Validación asíncrona

En esta sección, aprenderemos a realizar la validación asíncrona en los campos del formulario utilizando servicios RESTful en Angular. Seguiremos los siguientes pasos:

Validación asíncrona utilizando servicios RESTful

  1. En primer lugar, asegúrate de tener configurado y funcionando un servicio RESTful que proporcione la funcionalidad de validación para los campos del formulario. Por ejemplo, supongamos que tienes un endpoint /api/validacion que acepta una solicitud POST con un objeto JSON que contiene los datos a validar. El servidor responderá con un código de estado HTTP 200 si los datos son válidos y un código de estado HTTP 400 si hay errores de validación.

Mostrar mensajes de carga durante la validación

  1. Abre el archivo formulario.component.ts y realiza los siguientes cambios:
1 import { Component, OnInit } from '@angular/core'; 2 import { FormBuilder, FormGroup, Validators, FormControl, AbstractControl } from '@angular/forms'; 3 import { HttpClient } from '@angular/common/http'; 4 // ... 5 @Component({ 6 selector: 'app-formulario', 7 templateUrl: './formulario.component.html', 8 styleUrls: ['./formulario.component.css'] 9 }) 10 export class FormularioComponent implements OnInit { 11 // ... 12 cargandoValidacion: boolean = false; // Nuevo: variable para indicar si se está realizando la validación 13 constructor(private formBuilder: FormBuilder, private http: HttpClient) { } 14 // ... 15 validarCampos(): void { 16 this.cargandoValidacion = true; // Nuevo: establecemos la variable de carga a true 17 const datosValidar = { // Creamos el objeto con los datos a validar 18 nombre: this.nombreControl.value, 19 email: this.emailControl.value, 20 telefono: this.telefonoControl.value 21 }; 22 this.http.post('/api/validacion', datosValidar) 23 .subscribe( 24 () => { 25 this.cargandoValidacion = false; // Nuevo: establecemos la variable de carga a false 26 this.formulario.setErrors(null); // Nuevo: establecemos los errores del formulario a null 27 }, 28 (error) => { 29 this.cargandoValidacion = false; // Nuevo: establecemos la variable de carga a false 30 if (error.status === 400) { 31 this.formulario.setErrors({ servidor: true }); // Nuevo: establecemos un error general en el formulario 32 } 33 } 34 ); 35 } 36 // ... 37 }

En este código, hemos agregado una variable cargandoValidacion que indica si se está realizando la validación asíncrona. La inicializamos a false al comienzo. Luego, en el método validarCampos(), establecemos cargandoValidacion a true antes de realizar la solicitud al servicio RESTful.

Después de la solicitud, en la función subscribe(), establecemos cargandoValidacion a false para indicar que la validación ha finalizado. Si la respuesta del servidor es exitosa (código de estado HTTP 200), establecemos los errores del formulario a null utilizando this.formulario.setErrors(null). Esto indica que no hay errores de validación en el formulario.

Si la respuesta del servidor es un código de estado HTTP 400 (indicando errores de validación), establecemos un error general en el formulario utilizando this.formulario.setErrors({ servidor: true }). Esto permite mostrar un mensaje de error genérico al usuario.

Tratamiento de errores en la validación asíncrona

  1. Abre el archivo formulario.component.html y realiza los siguientes cambios:
1 <form [formGroup]="formulario" (ngSubmit)="enviarFormulario()"> 2 <!-- ... --> 3 <div *ngIf="formulario.errors?.servidor" class="error">Ha ocurrido un error en el servidor.</div> <!-- Nuevo: Mostramos mensaje de error en caso de error de validación en el servidor --> 4 <div *ngIf="cargandoValidacion" class="cargando">Validando campos...</div> <!-- Nuevo: Mostramos mensaje de carga durante la validación --> 5 <button type="submit" [disabled]="formulario.invalid || cargandoValidacion">Enviar</button> 6 </form>

Hemos agregado dos nuevos elementos en el HTML. El primer elemento <div> muestra un mensaje de error si formulario.errors?.servidor existe, lo que indica que ha ocurrido un error de validación en el servidor. Esto proporciona información adicional al usuario en caso de un error no específico.

El segundo elemento <div> muestra un mensaje de carga durante la validación si cargandoValidacion es true. Esto mejora la experiencia del usuario al indicarle que se están realizando operaciones en segundo plano.

Manejo de datos y envío del formulario

En esta sección, nos enfocaremos en el manejo de los datos recopilados del formulario y en el envío de estos datos a través de un servicio. Seguiremos los siguientes pasos:

Recopilación de datos del formulario

  1. En el archivo formulario.component.ts, asegúrate de tener definido el método enviarFormulario() con el siguiente código:
1enviarFormulario(): void { 2 if (this.formulario.valid) { 3 const datosFormulario = { 4 nombre: this.nombreControl.value, 5 email: this.emailControl.value, 6 telefono: this.telefonoControl.value 7 }; 8 // Continuar con el envío de los datos... 9 } else { 10 // Manejar caso de formulario inválido 11 } 12}

En este código, verificamos si el formulario es válido antes de enviar los datos. Si el formulario es válido, recopilamos los datos del formulario en un objeto datosFormulario utilizando los valores de los controles correspondientes.

Preparación de datos para el envío

  1. A continuación, prepararemos los datos para el envío a través de un servicio. Para ello, asegúrate de tener importado el módulo HttpClient en el archivo formulario.component.ts:
1import { HttpClient } from '@angular/common/http';
  1. Dentro del método enviarFormulario(), añade el siguiente código para enviar los datos utilizando el servicio:
1this.http.post('/api/enviar', datosFormulario) 2 .subscribe( 3 () => { 4 // Manejar caso de respuesta exitosa 5 }, 6 (error) => { 7 // Manejar caso de error en el envío 8 } 9 );

En este código, utilizamos el método post() del servicio HttpClient para realizar una solicitud POST a la ruta /api/enviar con los datos del formulario en el objeto datosFormulario. Luego, utilizamos subscribe() para gestionar la respuesta del servidor.

Gestión de respuestas y mensajes de éxito o error

  1. Ahora, vamos a manejar las respuestas del servidor y mostrar mensajes de éxito o error al usuario. Dentro del método subscribe(), añade el siguiente código:
1() => { 2 // Respuesta exitosa del servidor 3 this.formulario.reset(); // Reiniciar el formulario después del envío 4 // Mostrar mensaje de éxito al usuario 5}, 6(error) => { 7 // Error en el envío del formulario 8 // Mostrar mensaje de error al usuario 9}

En este código, en caso de una respuesta exitosa del servidor, utilizamos this.formulario.reset() para reiniciar el formulario después del envío. Esto permite al usuario enviar nuevos datos de forma más fácil. También puedes mostrar un mensaje de éxito al usuario para indicar que el formulario se ha enviado correctamente.

En caso de un error en el envío del formulario, puedes mostrar un mensaje de error al usuario para informarle sobre el problema.

Sigue aprendiendo Angular

En conclusión, en este tutorial hemos cubierto diversos aspectos clave para la creación de formularios reactivos en Angular. Hemos aprendido a configurar el entorno, crear componentes de formulario, realizar validaciones básicas y avanzadas, trabajar con validación asíncrona, manejar el envío de datos y gestionar las respuestas del servidor. Además, hemos explorado cómo mostrar mensajes de carga, éxito y error para mejorar la experiencia del usuario. Espero que este tutorial te haya brindado una base sólida para desarrollar formularios reactivos en Angular.

Si estás interesado en profundizar tus conocimientos sobre Angular, te recomiendo encarecidamente que explores nuestro curso de Angular, así como nuestro curso de Angular avanzado. En este curso, encontrarás materiales exhaustivos, ejemplos prácticos y ejercicios desafiantes que te ayudarán a dominar por completo el desarrollo de aplicaciones con Angular. ¡No dudes en aprovechar esta oportunidad para expandir tus habilidades y convertirte en un experto en Angular!

Gracias por seguir este tutorial y ¡mucho éxito en tu viaje de aprendizaje con Angular!

Descubre la formación a tu medida
Rellena el formulario para obtener más información sobre los cursos.
Tamaño de la empresa *
Términos y condiciones *
Tutoriales relacionados
Tutorial de Symfony: Guía de Primeros Pasos
Domina Symfony desde cero: Tutorial completo para iniciar en el desarrollo web con Symfony. Crea aplicaciones profesionales ahora.
Cómo crear una API RESTful en .NET 8 paso a paso
Domina la creación de API RESTful en .NET 8 con nuestro tutorial exclusivo. Aprende paso a paso y potencia tus habilidades de desarrollo.
Cómo Implementar Seguridad y Autenticación en Apps .NET 8
Aprende a implementar seguridad y autenticación en aplicaciones .NET 8. Protege tus datos y fortalece la confianza del usuario. ¡Tutorial completo!
Aprende React JS – Tutorial de Primeros Pasos
Aprende a dominar React JS desde cero y construye aplicaciones web sorprendentes. Descubre los primeros pasos aquí.
Tabla de contenido
Introducción
¿Qué son los formularios reactivos en Angular?
Beneficios de utilizar formularios reactivos
Configuración del entorno
Requisitos previos antes de comenzar
Creación del proyecto
Creación del componente de formulario
Creación de un formulario básico
Definición de campos y controles
Vinculación de los controles con el HTML
Validación avanzada de campos
Validación de longitud, formato y valores específicos
Uso de validadores personalizados
Mostrar mensajes de error al usuario
Validación asíncrona
Validación asíncrona utilizando servicios RESTful
Mostrar mensajes de carga durante la validación
Tratamiento de errores en la validación asíncrona
Manejo de datos y envío del formulario
Recopilación de datos del formulario
Preparación de datos para el envío
Gestión de respuestas y mensajes de éxito o error
Sigue aprendiendo Angular
Descubre la formación a tu medida
Rellena el formulario para obtener más información sobre los cursos.
Tamaño de la empresa *
Términos y condiciones *