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
Blazor e il pattern Model-View-ViewModel
Taggare automaticamente un team member in work item tramite Azure DevOps
Modificare il behavior del controllo SwipeView in Xamarin Forms
Creare un templated component per Blazor
Creare un effetto di ombra sui controlli della Universal Windows Platform
Montare una file share con Azure Container Instance
Keep Calm and Distributed Tracing
Creare un componente Button in Blazor per operazioni asincrone
Eseguire più query in un solo comando usando la libreria Entity Framework Plus
Recuperare un Azure Storage account cancellato
Realizzare un oggetto DataList generico in Blazor
Creare due extension method per serializzare un oggetto in JSON e viceversa utilizzando la libreria System.Text.Json
I più letti di oggi
- Creare un web server locale con LiveReload
- Operatori di confronto in JavaScript: == e ===
- Microsoft WebCamp - Roma, Milano
- Dev Night #2: Serverless - Milano
- Disponibile la release finale di Moonlight 1.0
- Lancio ufficiale di Moonlight 1.0
- Disponibile il Silverlight Toolkit March 2009 Release
- MonoTouch in versione 1.0: C# per iPhone diventa realtà