Comprendere i Validators con Angular: una semplice guida alla validazione dei form

La validazione dei form è un aspetto critico di qualsiasi applicazione web, perché aiuta a mantenere la qualità dei dati e a migliorare le interazioni degli utenti.

Cosa vedrai

• Cosa sono
• Esempio #1: compilazione obbligatoria
• Esempio #2: uso di un pattern
• Esempio #3: validator custom

Angular semplifica questo processo tramite i Validators, che possono essere facilmente integrati sia nei form reactive che in quelli basati su template.

Questo tutorial ti porterà nel mondo dei Validators con Angular, attraverso un esempio su un caso d’uso semplice, uno con l’utilizzo dei pattern e uno custom per consentirti di implementare strategie di validazione efficaci nelle tue applicazioni!

Cosa sono i Validators

I Validators sono una risorsa presente nel modulo @angular/forms che fornisce un insieme di validatori utili a controllare gli input forniti nei form reactive.

Alcuni di quelli più comuni sono required, che rende obbligatoria la compilazione di un campo del form, oppure minLength/maxLength, che impongono dei vincoli sulla lunghezza del campo, o ancora email, che verifica se l’input dell’utente riporta un indirizzo e-mail valido.

Possono essere utilizzati durante la definizione del form nel file .ts, così che questi controlli vengano eseguiti prima che si esegua la submission del contenuto del form.

Esempio #1: compilazione obbligatoria

Una volta importato il modulo ReactiveFormsModule nel componente che andremo ad utilizzare, è possibile definire un form come segue: utilizzando l’oggetto FormGroup, che rappresenta uno o più FormControl, ossia i campi di input che costituiscono il form.

...
userForm = new FormGroup({
    name: new FormControl("", [Validators.required]),
    ...
}
...

All’interno della definizione FormControl, ci sono due campi: il primo rappresenta il valore di default, che in questo caso sarà vuoto, mentre il secondo contiene una lista di validatori che dovranno essere applicati a questo input. In questo caso, utilizziamo uno dei Validator di default che rende il campo obbligatorio, ossia Validators.required.

Esempio #2: uso di un pattern

Un esempio un pelo più complesso è quello che prevede l’uso di un’espressione regolare, che permette di validare un campo secondo alcune regole stabilite tramite un pattern.

Se volessimo far inserire all’utente la sua età, potremmo sfruttare il validatore pattern come segue:

...
userForm = new FormGroup({
    name: new FormControl("", [Validators.required]),
    age:[null , [Validators.required , Validators.pattern('^\d{1,3}$')]]
    ...
}
...

All’interno della lista di validatori, abbiamo aggiunto Validators.pattern che definisce un’espressione per controllare che il campo contenga un numero intero compreso tra 1 e 99.

Esempio #3: validator custom

L’ultimo esempio prevede la definizione di un nuovo validatore che controlla se l’input contiene uno spazio o meno.

Per farlo, creiamo una nuova classe, che chiameremo (ad esempio) SpaceValidator, all’interno del quale andremo a creare un metodo statico che ritorna un oggetto ValidationErrors se la validazione fallisce, o null altrimenti, controllando che il campo control (che contiene l’input) abbia uno spazio con un indice diverso da zero.

import { AbstractControl, ValidationErrors } from '@angular/forms';
export class SpaceValidator {
  static validateSpace(control: AbstractControl): ValidationErrors | null {
    if ((control.value as string).indexOf(' ') >= 0) {
      return { validateSpace: true }
    }
  return null;
}
}

Questo validatore può essere utilizzato nei form Angular per garantire che gli utenti non inseriscano valori con spazi, il che potrebbe essere importante per determinati campi come nomi utente o ID in cui gli spazi non sono consentiti.

Una volta definito, possiamo utilizzarlo nel form come segue, semplicemente importandolo all’interno del componente e poi aggiungendolo nella lista dei validatori del campo di interesse.

...

import {SpaceValidator} from '../validators/space.validator';
...
userForm = new FormGroup({
    name: new FormControl("", [Validators.required]),
    age:[null , [Validators.required , Validators.pattern('^\d{1,3}$')]],
    userCode: new FormControl("", [Validators.required,SpaceValidator.validateSpace]),
    ...
}
...

Questi sono solo alcuni esempi di utilizzo dei validatori, ma ne esistono di più complessi e adatti ad ogni genere di situazione: prova a esplorarli tutti! 🔥

Per vedere il codice completo dell’esempio, trovi qui il repository.