Negli script precedenti abbiamo visto come creare e utilizzare una template variable assegnandole il valore della direttiva ngForm. In questo script usiamo la stessa tecnica per mostrare in linea gli errori di ogni singolo campo della form.
Supponiamo di avere una form con due campi obbligatori. Il modo migliore per mostrare i messaggi di errore è visualizzarli accanto al campo invece di mostrare in fondo alla form un generico messaggio di dati non validi come visto nello script precedente. Per fare questo dobbiamo creare una template variable per ogni campo e assegnare a ogni variabile il valore della direttiva ngModel che contiene lo stato di ogni campo compreso lo stato della validazione.
<input type="text" name="description" [(ngModel)]="description" required #description="ngModel"> <span *ngIf="description.valid">obbligatorio</span> <input type="text" name="name" [(ngModel)]="name" required #name="ngModel"> <span *ngIf="name.valid">obbligatorio</span>
Come possiamo vedere, la proprieta valid della direttiva ngModel ci dice se il campo è valido o meno.
In questo modo però, quando la form si apre e i campo sono vuoti, otteniamo immediatamente il messaggio di errore.
Per la User Experience questo comportamente non è ideale, ma possiamo ricorrere alla proprietà touched di ngModel che ci dice se il campo è stato utilizzato dall'utente (ad esempio ha modificato il valore).
<input type="text" name="description" [(ngModel)]="description" required #description="ngModel"> <span *ngIf="description.touched && description.valid">obbligatorio</span> <input type="text" name="name" [(ngModel)]="name" required #name="ngModel"> <span *ngIf="name.touched && name.valid">obbligatorio</span>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Implementare l'infinite scroll con QuickGrid in Blazor Server
Reactive form tipizzati con modellazione del FormBuilder in Angular
Gestire liste di tipi semplici con Entity Framework Core
Inizializzare i container in Azure Container Apps
Gestire i null nelle reactive form tipizzate di Angular
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Utilizzare Tailwind CSS all'interno di React: primi componenti
Elencare le container images installate in un cluster di Kubernetes
Disabilitare automaticamente un workflow di GitHub
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Creare moduli CSS in React