Els formularis dinàmics en Angular permeten crear i gestionar formularis de manera programàtica, adaptant-se a les necessitats canviants de l'usuari o de l'aplicació. Aquest tipus de formularis són especialment útils quan la configuració del formulari no és coneguda prèviament i es necessita construir-lo en temps d'execució.
Objectius d'aquest tema
- Entendre què són els formularis dinàmics.
- Aprendre a crear formularis dinàmics utilitzant Reactive Forms.
- Gestionar la validació de formularis dinàmics.
- Manipular els controls del formulari de manera programàtica.
Conceptes clau
- Què són els formularis dinàmics?
Els formularis dinàmics són aquells que es construeixen i es modifiquen en temps d'execució, en lloc de ser definits estàticament en el codi HTML. Això permet una major flexibilitat i adaptabilitat en la creació de formularis.
- Creació de formularis dinàmics amb Reactive Forms
Els Reactive Forms d'Angular proporcionen una manera robusta de gestionar formularis dinàmics. Utilitzant FormGroup, FormControl i FormArray, podem crear i gestionar formularis de manera programàtica.
Exemples pràctics
Pas 1: Configuració inicial
Primer, assegura't d'importar els mòduls necessaris en el teu mòdul Angular:
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
ReactiveFormsModule,
// altres imports
],
// altres configuracions
})
export class AppModule { }Pas 2: Creació del formulari dinàmic
A continuació, crearem un component que contingui un formulari dinàmic. Utilitzarem FormBuilder per facilitar la creació del formulari.
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
@Component({
selector: 'app-dynamic-form',
templateUrl: './dynamic-form.component.html',
styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {
dynamicForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit(): void {
this.dynamicForm = this.fb.group({
name: ['', Validators.required],
addresses: this.fb.array([])
});
}
get addresses(): FormArray {
return this.dynamicForm.get('addresses') as FormArray;
}
addAddress(): void {
const addressForm = this.fb.group({
street: ['', Validators.required],
city: ['', Validators.required],
state: ['', Validators.required],
zip: ['', Validators.required]
});
this.addresses.push(addressForm);
}
removeAddress(index: number): void {
this.addresses.removeAt(index);
}
onSubmit(): void {
console.log(this.dynamicForm.value);
}
}Pas 3: Plantilla HTML
La plantilla HTML per al nostre component dinàmic podria ser així:
<form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
<label for="name">Name:</label>
<input id="name" formControlName="name">
<div formArrayName="addresses">
<div *ngFor="let address of addresses.controls; let i = index" [formGroupName]="i">
<label for="street">Street:</label>
<input id="street" formControlName="street">
<label for="city">City:</label>
<input id="city" formControlName="city">
<label for="state">State:</label>
<input id="state" formControlName="state">
<label for="zip">Zip:</label>
<input id="zip" formControlName="zip">
<button type="button" (click)="removeAddress(i)">Remove Address</button>
</div>
</div>
<button type="button" (click)="addAddress()">Add Address</button>
<button type="submit">Submit</button>
</form>
- Validació de formularis dinàmics
La validació en formularis dinàmics es gestiona de la mateixa manera que en formularis estàtics. Pots afegir validadors als controls del formulari quan els crees.
const addressForm = this.fb.group({
street: ['', [Validators.required, Validators.minLength(3)]],
city: ['', Validators.required],
state: ['', Validators.required],
zip: ['', [Validators.required, Validators.pattern('^[0-9]{5}$')]]
});
- Manipulació programàtica dels controls del formulari
Pots afegir, eliminar o modificar els controls del formulari de manera programàtica utilitzant els mètodes proporcionats per FormArray.
// Afegir un nou control
this.addresses.push(this.fb.control(''));
// Eliminar un control existent
this.addresses.removeAt(index);
// Modificar un control existent
this.addresses.at(index).setValue('New Value');Exercicis pràctics
Exercici 1: Formulari de productes dinàmics
Crea un formulari dinàmic que permeti afegir, eliminar i modificar una llista de productes. Cada producte ha de tenir un nom, una descripció i un preu.
Solució
// Component TypeScript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
@Component({
selector: 'app-product-form',
templateUrl: './product-form.component.html',
styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent implements OnInit {
productForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit(): void {
this.productForm = this.fb.group({
products: this.fb.array([])
});
}
get products(): FormArray {
return this.productForm.get('products') as FormArray;
}
addProduct(): void {
const productForm = this.fb.group({
name: ['', Validators.required],
description: ['', Validators.required],
price: ['', [Validators.required, Validators.min(0)]]
});
this.products.push(productForm);
}
removeProduct(index: number): void {
this.products.removeAt(index);
}
onSubmit(): void {
console.log(this.productForm.value);
}
}<!-- Plantilla HTML -->
<form [formGroup]="productForm" (ngSubmit)="onSubmit()">
<div formArrayName="products">
<div *ngFor="let product of products.controls; let i = index" [formGroupName]="i">
<label for="name">Name:</label>
<input id="name" formControlName="name">
<label for="description">Description:</label>
<input id="description" formControlName="description">
<label for="price">Price:</label>
<input id="price" formControlName="price" type="number">
<button type="button" (click)="removeProduct(i)">Remove Product</button>
</div>
</div>
<button type="button" (click)="addProduct()">Add Product</button>
<button type="submit">Submit</button>
</form>Conclusió
Els formularis dinàmics en Angular proporcionen una manera flexible i potent de crear formularis que poden adaptar-se a les necessitats canviants de l'aplicació. Utilitzant Reactive Forms, podem gestionar fàcilment la creació, validació i manipulació de formularis de manera programàtica. Amb la pràctica, podràs crear formularis dinàmics complexos que millorin l'experiència de l'usuari i la funcionalitat de la teva aplicació.
Curs d'Angular 2+
Mòdul 1: Introducció a Angular
- Què és Angular?
- Configuració de l'entorn de desenvolupament
- La teva primera aplicació Angular
- Arquitectura d'Angular
Mòdul 2: Conceptes bàsics de TypeScript
- Introducció a TypeScript
- Variables i tipus de dades en TypeScript
- Funcions i funcions fletxa
- Classes i interfícies
Mòdul 3: Components i plantilles
Mòdul 4: Directives i pipes
Mòdul 5: Serveis i injecció de dependències
Mòdul 6: Enrutament i navegació
Mòdul 7: Formularis en Angular
Mòdul 8: Client HTTP i observables
- Introducció al client HTTP
- Realització de sol·licituds HTTP
- Gestió de respostes HTTP
- Ús d'observables