Convalida personalizzata nei form Angular

Imparare a implementare validators personalizzati per garantire una convalida solida dei form nelle applicazioni Angular.

Che cos'è la convalida personalizzata?

I validators personalizzati consentono di definire una logica di convalida propria, oltre ai validators integrati come required o minlength.

Creazione di un validator personalizzato

Un validator personalizzato è una semplice funzione che restituisce null se il valore è valido oppure un oggetto se non lo è:

function forbiddenNameValidator(control: AbstractControl): { [key: string]: any } | null {
  return control.value === 'admin' ? { 'forbiddenName': true } : null;
}

Applicazione del validator

Applicare il validator personalizzato al controllo del form:

this.myForm = new FormGroup({
  username: new FormControl('', [forbiddenNameValidator])
});

Visualizzazione degli errori di convalida

Mostrare condizionalmente i messaggi di errore nel template in base allo stato della convalida:

<div *ngIf="myForm.get('username').hasError('forbiddenName')">
  Username 'admin' is not allowed.
</div>

Utilizzo delle direttive validator

I validators possono essere utilizzati direttamente anche come direttive per i form basati su template:

<input name="username" ngModel forbiddenName>

Validator asincroni

I validators asincroni consentono di eseguire convalide che includono operazioni asincrone, come i controlli sul server:

username: new FormControl('', null, [asyncValidator])

Test dei validators personalizzati

Testare sempre i validators per assicurarsi che si comportino correttamente in scenari diversi e nei casi limite.

Riepilogo

Ha imparato a creare e applicare validators personalizzati per una convalida solida dei form in Angular. Ottimo lavoro!