In molti progetti abbiamo la necessità di creare form complesse con molti campi. I vari campi hanno spesso in comune molte necessita come quella di avere una label, un messaggio di validazione in caso questa fallisse e altro ancora. In questi casi può tornare utile creare un component che racchiuda queste funzionalità così da semplificare lo sviluppo di queste form.
Questo component accetta in input la label da mostrare, un oggetto FormControl che rappresenta il controllo da associare al campo di input e un oggetto di tipo NgForm che rappresenta la form HTML. Grazie a questi dati possiamo costruire il nostro component.
export class StringEditorComponent implements OnInit { @Input() label: string; @Input() form: NgForm; @Input() control: FormControl; }
<div class="form-group" [formGroup]="control.parent" [ngClass]="{'has-error': !controls.valid && control.touched && form?.submitted}"> <label>{{label}}</label> <input type="text" class="form-control" [formControl]="control" /> <app-validation-editor [form]="form" [control]="control" /> </div>
La parte più interessante del component è sicuramente il template. Il div che agisce da contenitore applica la classe has-error solo se il controllo è valido, se ha ricevuto il focus e se è stato fatto il submit della form. Il div contiene anche la label, il campo di testo messo in binding con il controllo passato in input e un altro controllo che mostra i messaggi di errore (di cui parleremo in uno script successivo.
Per utilizzare questo controllo in una pagina, dobbiamo prima creare un oggeto FormGroup con i controlli figli, e poi mettere in binding questi dati con il component.
this.form = this.fb.group({ customerId: [customer.customerId, this.newCustomer ? [Validators.required] : []], companyName: [customer.companyName, Validators.compose([Validators.required, Validators.maxLength(40) });
<form [formGroup]="form" class="form" (ngSubmit)="onSubmit()" #ngform="ngForm"> <app-string-editor [formGroup]="form" [form]="ngform" [control]="form.get('customerId')" /> <app-string-editor [formGroup]="form" [form]="ngform" controlName="form.get('companyName')" /> </form>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Effettuare il download di un file via FTP con la libreria FluentFTP di .NET
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Eseguire una GroupBy per entity in Entity Framework
Le novità di Angular: i miglioramenti alla CLI
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Configurare policy CORS in Azure Container Apps
Utilizzare la libreria Benchmark.NET per misurare le performance
Utilizzare gli snapshot con Azure File shares
Inizializzare i container in Azure Container Apps
Creare un'applicazione React e configurare Tailwind CSS
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework