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
Utilizzare la parola chiave var con lambda eExpression e method group in C# 10
Calcolare automaticamente un numero di versione di un repository in una GitHub Action
Caricare immagini a differenti risoluzioni in HTML con srcset
Creare Azure Function con supporto a OpenAPI
Creare un form con Bootstrap 5
Monitorare e prevenire problemi in produzione
Usare l'option pattern per gestire la configurazione in ASP.NET Core
Eseguire query in parallelo con Entity Framework Core and ASP.NET Core
Effettuare un loop di una GitHub Action
Utilizzare il browser per rilevare Javascript e CSS non utilizzati nel codice
Creare l'effetto floating label per gli input con Bootstrap 5
Controllare lo stato di un servizio gRPC in ASP.NET Core tramite Health Check