Nello script #279 abbiamo visto come creare un component riutilizzabile per mostrare un campo su una form. All'interno del component abbiamo utilizzato un altro component che aveva come scopo quello di mostrare i messagi di errore. In questo script analizziamo in dettaglio questo component. Come prima cosa, questo component accetta in input il controllo e la form.
export class ValidationEditorComponent implements OnInit { @Input() form: NgForm; @Input() control: FormControl; }
<ng-container *ngIf="control.touched && form?.submitted"> <span *ngFor="let p of control.errors | mapToArray"> <span class="help-block">{{p}}</span> </span> </ng-container>
La parte interessante del component è ancora una volta il template HTML. Questo template mostra il container quando il controllo in binding non è valido. Gli errori del controllo vengono prima trasformati in un array e poi mostrati tramite la direttiva ngFor. In questo caso mostriamo il codice dell'errore, ma volendo possiamo creare una pipe che prende in input il codice di errore e ritorna un messaggio leggibile per l'utente.
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
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Load test di ASP.NET Core con k6
Creare moduli CSS in React
Creare gruppi di client per Event Grid MQTT
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Utilizzare la libreria Benchmark.NET per misurare le performance
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
.NET Conference Italia 2023
Usare un KeyedService di default in ASP.NET Core 8
Supportare il sorting di dati tabellari in Blazor con QuickGrid