Els formularis reactius a Angular proporcionen una manera més robusta i escalable de gestionar formularis complexos. A diferència dels formularis basats en plantilles, els formularis reactius es defineixen i gestionen completament en el codi TypeScript, oferint un major control i flexibilitat.

• Comprendre la diferència entre formularis basats en plantilles i formularis reactius.
• Aprendre a crear formularis reactius.
• Gestionar la validació de formularis reactius.
• Manipular i reaccionar als canvis en els formularis reactius.

1. Importar els mòduls necessaris:

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

2. Definir el formulari en el component TypeScript:

   import { Component } from '@angular/core';
   import { FormGroup, FormControl, Validators } from '@angular/forms';
   
   @Component({
     selector: 'app-reactive-form',
     templateUrl: './reactive-form.component.html'
   })
   export class ReactiveFormComponent {
     myForm: FormGroup;
   
     constructor() {
       this.myForm = new FormGroup({
         name: new FormControl('', [Validators.required, Validators.minLength(3)]),
         email: new FormControl('', [Validators.required, Validators.email]),
         password: new FormControl('', [Validators.required, Validators.minLength(6)])
       });
     }
   
     onSubmit() {
       console.log(this.myForm.value);
     }
   }
   

3. Crear la plantilla HTML:

   <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
     <label for="name">Name:</label>
     <input id="name" formControlName="name">
     <div *ngIf="myForm.get('name').invalid && myForm.get('name').touched">
       <small *ngIf="myForm.get('name').errors.required">Name is required.</small>
       <small *ngIf="myForm.get('name').errors.minlength">Name must be at least 3 characters long.</small>
     </div>
   
     <label for="email">Email:</label>
     <input id="email" formControlName="email">
     <div *ngIf="myForm.get('email').invalid && myForm.get('email').touched">
       <small *ngIf="myForm.get('email').errors.required">Email is required.</small>
       <small *ngIf="myForm.get('email').errors.email">Invalid email format.</small>
     </div>
   
     <label for="password">Password:</label>
     <input id="password" type="password" formControlName="password">
     <div *ngIf="myForm.get('password').invalid && myForm.get('password').touched">
       <small *ngIf="myForm.get('password').errors.required">Password is required.</small>
       <small *ngIf="myForm.get('password').errors.minlength">Password must be at least 6 characters long.</small>
     </div>
   
     <button type="submit" [disabled]="myForm.invalid">Submit</button>
   </form>
   

• FormGroup: Representa el formulari en si mateix. És un contenidor per a un conjunt de controls de formulari.
• FormControl: Representa un únic control de formulari, com un camp de text.
• Validators: S'utilitzen per aplicar regles de validació als controls de formulari.

Els formularis reactius permeten definir validacions de manera programàtica. A l'exemple anterior, hem utilitzat els validators required, minlength i email.

Els formularis reactius permeten reaccionar als canvis en els controls de formulari de manera senzilla:

Crear un formulari reactiu que inclogui camps per a nom, correu electrònic i contrasenya, amb validacions adequades.

1. Crea un nou component anomenat UserFormComponent.
2. Defineix un formulari reactiu amb els camps name, email i password.
3. Afegeix validacions per a cada camp:
   • name: requerit, mínim 3 caràcters.
   • email: requerit, format de correu electrònic.
   • password: requerit, mínim 6 caràcters.
4. Mostra missatges d'error adequats en la plantilla HTML.
5. Afegeix un botó de submissió que només estigui habilitat si el formulari és vàlid.

user-form.component.ts:

user-form.component.html:

En aquest tema, hem après a crear formularis reactius a Angular, a definir validacions i a gestionar els canvis en els controls de formulari. Els formularis reactius ofereixen un major control i escalabilitat, fent-los ideals per a aplicacions complexes. Hem vist com definir un formulari reactiu en el codi TypeScript i com mostrar missatges d'error en la plantilla HTML. A més, hem practicat aquests conceptes amb un exercici pràctic.