Cómo hacer un Formulario Reactivo en Angular

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.

2. 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.

3. 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.
4. 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.

3. 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."

4. 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

2. 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.

Nombre *

Apellido *

Email corporativo *

Tamaño de la empresa *

Tamaño de la empresa *

Número de teléfono *

Términos y condiciones *

Acepto los términos y condiciones

Solicitar información

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

2. 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

3. 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

2. 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

3. 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

2. 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';

3. 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

4. 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 para empresas, así como nuestro curso de Angular avanzado para empresas. 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!

También, te invitamos a conocer los mejores cursos bonificados para empresas y descubrir la formación que más se adapte a tus necesidades.