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
Come migrare da una form non tipizzata a una form tipizzata in Angular
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Short-circuiting della Pipeline in ASP.NET Core
Evitare la script injection nelle GitHub Actions
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Eseguire attività con Azure Container Jobs
Catturare la telemetria degli eventi di output cache in ASP.NET Core
Reactive form tipizzati con FormBuilder in Angular
Creare un'applicazione React e configurare Tailwind CSS
Creare form tipizzati con Angular
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Utilizzare gli snapshot con Azure File shares