Angular: Formularios Reactivos

Formularios Reactivos

Los Formularios Reactivos en Angular son una manera de gestionar los formularios de manera programática y más controlada, utilizando una aproximación basada en la reactividad. Esto permite construir formularios complejos con validaciones dinámicas, manipulación y seguimiento del estado de los controles del formulario, así como respuestas a los cambios de estado en tiempo real.

Componentes de los Formularios Reactivos en Angular

1. FormControl: Representa un solo campo de entrada en el formulario. Representa un único control de formulario (input, select, textarea, etc.).
2. FormGroup: Agrupa varios controles de formulario, permitiendo tratarlos como una única unidad. Agrupa varios FormControl en una estructura jerárquica.
   
3. FormArray: Permite gestionar un array de controles de formulario, ideal para formularios dinámicos.
4. FormBuilder: Servicio que facilita la creación de instancias de FormControl, FormGroup y FormArray.
5. Validators: Conjunto de validadores predefinidos que se pueden aplicar a los controles de formulario.
   

Videotutoriales:

1. Curso Angular 2023 #5 Crear Formularios Reactivos En Angular: https://youtu.be/gh6xpR_LBCQ
2. Formularios reactivos (formControl): https://youtu.be/eqySei7Z22k
3. Formularios reactivos (FormBuilder)   https://youtu.be/sYVHJ0SPt6M
4. Uso de FormBuilder https://youtu.be/dAKhQ2m3PUA
   
5. Formularios reactivos (Validators) https://youtu.be/PqJ_PKcIoWQ
   
6. FORMULARIOS REACTIVOS EN ANGULAR 🅰️ - 28 https://youtu.be/epSVNMtG80I
7.  Formularios reactivos con Angular Material 🤓https://youtu.be/JCW5uhROyWU

 

Ejemplo:

1. Creamos un FormGroup llamado profileForm.
2. Definimos tres FormControl: firstName, lastName y email.
3. Aplicamos validaciones como required y email.
4. En el método onSubmit(), validamos el formulario y manejamos la lógica de envío de datos.

TypeScript

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

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
})
export class ProfileEditorComponent {
  profileForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.profileForm = this.fb.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
    });
  }

  onSubmit() {
    if (this.profileForm.valid) {
      // Handle form submission (e.g., send data to server)
      console.log(this.profileForm.value);
    }
  }
}

Aquí va el código Javascript a mostrar en la entrada.

 -----------------------------------------------------------------------------------------

FormControl:

• Crea y gestiona un control individual del formulario.

 // typescript: código
let name = new FormControl('');

 

FormGroup:

• Agrupa múltiples controles y los gestiona como una unidad.

// typescript: código
let formGroup = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl('')
});

FormArray:

• Gestiona un array de controles.

 

// typescript: código
let formArray = new FormArray([
  new FormControl(''),
  new FormControl('')
]);

FormBuilder:

• Servicio que facilita la creación de controles, grupos y arrays.

// typescript: código
constructor(private fb: FormBuilder) {}

let formGroup = this.fb.group({
  firstName: [''],
  lastName: ['']
});

Validators:

• Proporciona validadores como Validators.required, Validators.minLength, etc.

 

// typescript: código
let control = new FormControl('', Validators.required);

 

Ejemplo de Formularios Reactivos

// typescript: app.component.ts
import { Component } from '@angular/core';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClientModule, HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, NgModule, ReactiveFormsModule, HttpClientModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
userForm: FormGroup;

  constructor(private fb: FormBuilder, private http: HttpClient) {
    this.userForm = this.fb.group({
      userName: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      this.http.post('http://localhost:3000/users', this.userForm.value)
        .subscribe(response => {
          console.log('Data saved successfully', response);
        }, error => {
          console.error('Error saving data', error);
        });
    } else {
      console.error('Form is invalid');
    }
  }
}

 

<!-- app.component.html -->

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">

<label for="userName">Username:</label>

<input id="userName" formControlName="userName">

<div *ngIf="userForm.get('userName').invalid && userForm.get('userName').touched">

Username is required.
  </div>


<label for="email">Email:</label>

<input id="email" formControlName="email">

<div *ngIf="userForm.get('email').invalid && userForm.get('email').touched">

Please enter a valid email.

</div>


<button type="submit" [disabled]="userForm.invalid">Submit</button>

</form>

...

 

Configuración del servidor backend con JSON Server:

Este código de Angular junto con el JSON Server permite crear y gestionar un formulario reactivo que guarda los datos en una base de datos local simulada.

1- Instala JSON Server:

// bash
npm install -g json-server

2- Crea un archivo db.json en la raíz de tu proyecto con el siguiente contenido:

// json
{ "users": [] }

3- Inicia JSON Server:

// bash
json-server --watch db.json --port 3000

mmm