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
Miglioramenti agli screen reader e al contrasto in Angular
Determinare lo stato di un pod in Kubernetes
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Limitare le richieste lato server con l'interactive routing di Blazor 8
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Eseguire una query su SQL Azure tramite un workflow di GitHub
Usare le collection expression per inizializzare una lista di oggetti in C#
Utilizzare Tailwind CSS all'interno di React: primi componenti
Utilizzare la libreria Benchmark.NET per misurare le performance
Routing statico e PreRendering in una Blazor Web App
Usare un KeyedService di default in ASP.NET Core 8
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
I più letti di oggi
- Cambiare la chiave di partizionamento di Azure Cosmos DB
- ASP.NET 2.0 per tutti
- Definire stili a livello di libreria in Angular
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- .NET Conference Italia 2023 - Milano e Online
- Come EF 8 ha ottimizzato le query che usano il metodo Contains
- Ottimizzazione dei block template in Angular 17