Capítulo 5: Formularios en Angular

5.1 Formularios Reactivos

Los formularios reactivos son una forma poderosa de gestionar formularios en Angular. Te permiten crear formularios dinámicos y flexibles mediante el uso de objetos JavaScript para representar los formularios y sus estados. Aquí hay un ejemplo de cómo crear un formulario reactivo:

Importa ReactiveFormsModule desde @angular/forms en tu módulo principal (por lo general, app.module.ts).

import { ReactiveFormsModule } from '@angular/forms';

Crea un formulario reactivo en tu componente. Por ejemplo:

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class MyComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      username: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }
}

Utiliza el formulario en tu plantilla HTML:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <input formControlName="username" placeholder="Nombre de usuario">
  <input formControlName="email" placeholder="Correo electrónico">
  <input formControlName="password" type="password" placeholder="Contraseña">
  <button type="submit">Enviar</button>
</form>

5.2 Validación de Formularios

Los formularios reactivos permiten realizar una amplia gama de validaciones. Puedes utilizar las funciones de validación proporcionadas por @angular/forms, como Validators.required, Validators.email, Validators.minLength, y personalizar tus propias validaciones. Además, puedes mostrar mensajes de error en tu plantilla en función de la validez de los campos.

Aquí tienes una lista de algunas de las funciones de validación proporcionadas por @angular/forms en Angular:

1. Validators.required: Valida que el campo sea obligatorio (no esté vacío).
2. Validators.email: Valida que el campo contenga una dirección de correo electrónico válida.
3. Validators.minLength(minLength: number): Valida que la longitud del campo sea igual o mayor que el valor de minLength.
4. Validators.maxLength(maxLength: number): Valida que la longitud del campo sea igual o menor que el valor de maxLength.
5. Validators.pattern(pattern: string | RegExp): Valida que el campo cumpla con un patrón específico proporcionado como una expresión regular o una cadena de caracteres.
6. Validators.min(min: number): Valida que el valor numérico del campo sea igual o mayor que el valor de min.
7. Validators.max(max: number): Valida que el valor numérico del campo sea igual o menor que el valor de max.
8. Validators.nullValidator: Un validador nulo que siempre devuelve nulo. Se utiliza para desactivar validaciones en algunos casos.
9. Validators.compose(validators: ValidatorFn[]): Combina varios validadores en una sola función de validación.
10. Validators.composeAsync(asyncValidators: AsyncValidatorFn[]): Combina varios validadores asincrónicos en una sola función de validación.

Estas son algunas de las funciones de validación más comunes proporcionadas por @angular/forms. Puedes combinar estas funciones para crear validaciones más complejas y personalizadas según las necesidades de tus formularios.

5.3 Envío de Datos a través de Formularios

Para enviar datos a través de un formulario reactivo, puedes utilizar el método getRawValue() para obtener los valores del formulario y luego enviarlos a través de una solicitud HTTP o realizar cualquier acción que necesites.

onSubmit() {
  if (this.myForm.valid) {
    const formData = this.myForm.getRawValue();
    // Realizar la acción necesaria, como enviar datos a través de una solicitud HTTP
  }
}

5.4 Formularios Dinámicos

Los formularios reactivos también te permiten crear formularios dinámicos, donde puedes agregar o quitar campos de formulario según las necesidades de tu aplicación. Por ejemplo, puedes agregar un botón «Agregar campo» que genere dinámicamente nuevos campos en el formulario.

Para agregar un campo de forma dinámica, puedes utilizar el método addControl o removeControl en el formulario. A continuación, un ejemplo básico:

addField() {
  const newField = this.fb.control('', Validators.required);
  this.myForm.addControl('newField', newField);
}

removeField() {
  this.myForm.removeControl('newField');
}

Esto te permite crear formularios altamente dinámicos y adaptables a las necesidades de tu aplicación.

Este es un resumen del uso de formularios reactivos en Angular, incluyendo la validación de formularios, el envío de datos y la creación de formularios dinámicos. Los formularios reactivos son una herramienta poderosa para manejar entradas de usuario en aplicaciones web.