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
Path addizionali per gli asset in ASP.NET Core MVC
Triggerare una pipeline su un altro repository di Azure DevOps
Estrarre dati randomici da una lista di oggetti in C#
Sfruttare GPT-4o realtime su Azure Open AI per conversazioni vocali
Il nuovo controllo Range di Blazor 9
Utilizzare Copilot con Azure Cosmos DB
Miglioramenti agli screen reader e al contrasto in Angular
Disabilitare automaticamente un workflow di GitHub
Creare una libreria CSS universale - Rotazione degli elementi
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Sostituire la GitHub Action di login su private registry
Simulare Azure Cosmos DB in locale con Docker