El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Els formularis dinàmics a Angular permeten crear i gestionar formularis que poden canviar la seva estructura en temps d'execució. Això és especialment útil quan la configuració del formulari depèn de dades que es reben de manera dinàmica, com ara respostes d'API o interaccions de l'usuari.

Objectius d'aquest tema

Comprendre què són els formularis dinàmics.
Aprendre a crear formularis dinàmics utilitzant el mòdul ReactiveFormsModule.
Gestionar la validació de formularis dinàmics.
Implementar exemples pràctics de formularis dinàmics.

Conceptes clau

Què són els formularis dinàmics?

Els formularis dinàmics són formularis que es poden modificar en temps d'execució. Això vol dir que es poden afegir, eliminar o modificar camps del formulari basant-se en dades dinàmiques o interaccions de l'usuari.

Configuració inicial

Per treballar amb formularis dinàmics, necessitem importar el mòdul ReactiveFormsModule al nostre mòdul principal.

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

@NgModule({
  imports: [
    // altres imports
    ReactiveFormsModule
  ],
  // altres configuracions
})
export class AppModule { }

Crear un formulari dinàmic

A continuació, veurem com crear un formulari dinàmic utilitzant FormGroup i FormArray.

Pas 1: Definir el formulari en el component TypeScript

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

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html'
})
export class DynamicFormComponent implements OnInit {
  dynamicForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.dynamicForm = this.fb.group({
      name: ['', Validators.required],
      addresses: this.fb.array([])
    });
  }

  get addresses() {
    return this.dynamicForm.get('addresses') as FormArray;
  }

  addAddress() {
    const addressForm = this.fb.group({
      street: ['', Validators.required],
      city: ['', Validators.required],
      state: ['', Validators.required],
      zip: ['', Validators.required]
    });

    this.addresses.push(addressForm);
  }

  removeAddress(index: number) {
    this.addresses.removeAt(index);
  }

  onSubmit() {
    console.log(this.dynamicForm.value);
  }
}

Pas 2: Definir la plantilla HTML

<form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Name</label>
    <input id="name" formControlName="name">
  </div>

  <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 reactius estàtics. Utilitzem Validators per definir les regles de validació.

Exemples pràctics

Exemple 1: Formulari de registre amb camps dinàmics

Suposem que volem crear un formulari de registre on l'usuari pugui afegir múltiples números de telèfon.

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

@Component({
  selector: 'app-registration-form',
  templateUrl: './registration-form.component.html'
})
export class RegistrationFormComponent implements OnInit {
  registrationForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.registrationForm = this.fb.group({
      username: ['', Validators.required],
      phones: this.fb.array([this.createPhone()])
    });
  }

  get phones() {
    return this.registrationForm.get('phones') as FormArray;
  }

  createPhone(): FormGroup {
    return this.fb.group({
      phone: ['', Validators.required]
    });
  }

  addPhone() {
    this.phones.push(this.createPhone());
  }

  removePhone(index: number) {
    this.phones.removeAt(index);
  }

  onSubmit() {
    console.log(this.registrationForm.value);
  }
}

<!-- Plantilla HTML -->
<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="username">Username</label>
    <input id="username" formControlName="username">
  </div>

  <div formArrayName="phones">
    <div *ngFor="let phone of phones.controls; let i=index" [formGroupName]="i">
      <label for="phone">Phone</label>
      <input id="phone" formControlName="phone">
      <button type="button" (click)="removePhone(i)">Remove Phone</button>
    </div>
  </div>

  <button type="button" (click)="addPhone()">Add Phone</button>
  <button type="submit">Submit</button>
</form>

Resum

En aquest tema, hem après a crear formularis dinàmics a Angular utilitzant ReactiveFormsModule. Hem vist com afegir i eliminar camps de formulari dinàmicament, així com gestionar la validació d'aquests formularis. Els formularis dinàmics són una eina poderosa per crear aplicacions flexibles i adaptables a les necessitats dels usuaris.

En el següent mòdul, explorarem com treballar amb el client HTTP i observables a Angular.

Formularis dinàmics

Objectius d'aquest tema

Conceptes clau

Què són els formularis dinàmics?

Configuració inicial

Crear un formulari dinàmic

Pas 1: Definir el formulari en el component TypeScript

Pas 2: Definir la plantilla HTML

Validació de formularis dinàmics

Exemples pràctics

Exemple 1: Formulari de registre amb camps dinàmics

Resum

Curs d'Angular

Mòdul 1: Introducció a Angular

Mòdul 2: Components d'Angular

Mòdul 3: Enllaç de dades i directives

Mòdul 4: Serveis i injecció de dependències

Mòdul 5: Enrutament i navegació

Mòdul 6: Formularis a Angular

Mòdul 7: Client HTTP i observables

Mòdul 8: Gestió d'estat

Mòdul 9: Proves a Angular

Mòdul 10: Conceptes avançats d'Angular

Mòdul 11: Desplegament i millors pràctiques