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
Eseguire i worklow di GitHub su runner potenziati
Gestire i null nelle reactive form tipizzate di Angular
Reactive form tipizzati con modellazione del FormBuilder in Angular
Migrare una service connection a workload identity federation in Azure DevOps
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Ottimizzazione dei block template in Angular 17
Effettuare il binding di date in Blazor
Miglioramenti nell'accessibilità con Angular CDK
Disabilitare automaticamente un workflow di GitHub
Reactive form tipizzati con FormBuilder in Angular
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
Paginare i risultati con QuickGrid in Blazor