Angular Reactive Form: la gestione dei form

Angular Reactive Form: l’elemento fondamentale per la gestione dell’input dei dati.

Che sia la pagina di registrazione, quella di login o quella di contatto, il form rappresenta la parte centrale di un’applicazione web.

Indice

Cosa sono i Reactive Forms di Angular

I Reactive Forms di Angular permettono di gestire gli input dell’utente tramite un modello model-driven.

Questo modo di creare form garantisce la possibilità di definire i campi del forms e le regole di validazione di ciascuno di essi tramite un oggetto JavaScript.

Inoltre, sia il form che ciascun elemento che lo compone espone un observable per informare eventuali Subscribers dei cambiamenti di stato.

Come si usano gli Angular Reactive Forms

Esistono diversi approcci per costruire un ReactiveForm.

In questo articolo utilizzeremo i FormBuilder.

Per prima cosa, è necessario dichiarare la struttura del form del file *.ts del componente.

import {
  FormBuilder,
  FormGroup,
  Validators,
} from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './main.html',
})
export class App {
  registrationForm: FormGroup = this.fb.group({
    persona: this.fb.group({
      nome: ['', [Validators.required, Validators.pattern('[a-zA-Z]*')]],
      cognome: ['', [Validators.required, Validators.pattern('[a-zA-Z]*')]],
      iniziali: [{ value: '', disabled: true }],
    }),
    email: ['', [Validators.required, Validators.email]],
  });
  constructor(private fb: FormBuilder) {}
}

In questo codice, dichiariamo la struttura del form registrationForm.

Come puoi vedere, questo form è strutturato a più livelli, infatti persona è a sua volta un FormGroup.

Il form così definito produce dei valori così definiti

{
  "persona": {
    "nome": "Dario",
    "cognome": "Capozzi",
    "iniziali": "DC"
  },
  "email": "reactiveforms@dariocapozzi.it"
}

Affinché il ReactiveForm gestisca l’input dell’utente, è necessario che la view del componente (i.e. il file *.html) contenga i riferimenti corretti agli elementi del form.

<form [formGroup]="registrationForm">
  
  <div formGroupName="persona">
    <div>
      <label for="nome">Nome</label>
      <input type="text" formControlName="nome" />
    </div>
    <div>
      <label for="cognome">Cognome</label>
      <input type="text" formControlName="cognome" />
    </div>
    <div>
      <label for="iniziali">Iniziali</label>
      <input type="text" formControlName="iniziali" />
    </div>
    
  </div>
  
  <div>
    <label for="email">Email</label>
    <input type="text" formControlName="email" />
  </div>
  <div class="mt-5">
    <button (click)="salvaForm()">Registrati</button>
  </div>
</form>

Come vedi, è presente un tag <form> decorato con l’input [formGroup]="registrationForm".

Questo estratto di codice collega quel form che verrà visualizzato nel browser dell’utente all’oggetto ReactiveForm dichiarato nel file *.ts.

Il codice formGroupName="persona" indica che quella parte di codice si riferisce ad un FormGroup contenuto in registrationForm.

Quindi, ciascun elemento input è collegato al corrispondente elemento del ReactiveForm per mezzo del codice formControlName="nomeDelFormControl".

Reactive Forms: validazione

I Reactive Forms mettono a disposizione delle funzioni di validazione, detti Validators.

I Validators possono essere:

Sincroni: funzioni che ricevono in input il valore di un FormControl e ritornano immediatamente il risultato della validazione
Asincroni: funzioni che ricevono in input il valore di un FormControl e ritornano un Observable per successivamente comunicare il risultato della validazione

Angular mette a disposizione diversi Validators pronti all’uso:

min
max
required
requiredTrue
email
minLength
maxLength
pattern
nullValidator
compose
composeAsync

Reactive Forms Angular: classi CSS

Ogni elemento HTML collegato al ReactiveForm viene decorato da classi CSS, in funzione dello stato in cui quell’elemento si trova.

Tali classi permettono allo sviluppatore di creare delle regole CSS per evidenziare alcuni stati particolari del form.

Ad esempio, per evidenziare di rosso i campi non validi di un form, si potrebbe utilizzare questa regola CSS:

input.ng-touched.ng-invalid {
  border: 2px solid red;
}

La lista delle classi aggiunte dal ReactiveForm è la seguente:

ng-valid
ng-invalid
ng-pending
ng-pristine
ng-dirty
ng-untouched
ng-touched
ng-submitted – (applicata solo ai Forms)

Angular Reactive Forms: esempio pratico

In questo esempio vedrai l’utilizzo di quanto spiegato in questo articolo.

Infatti, ho utilizzato più validatori, ho definito un Reactive Form nidificato.

Inoltre, ho sfruttato le classi CSS impostate dal Reactive Form per rendere l’esperienza dell’utente più gradevole.

Come altri esempi presenti sul blog, anche questo permette di esplorare il codice che lo implementa.

Approfondimenti Angular

In questo blog puoi trovare numerosi articoli relativi ad Angular ed al Web Development.

Eccone alcuni:

Conclusioni

In questo articolo hai visto come funzioni e come utilizzare un Angular Reactive Form.

Se volessi approfondire l’argomento, puoi visitare la pagina Reactive Forms della documentazione ufficiale di Angular.

Seguimi su