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
Installare le Web App site extension tramite una pipeline di Azure DevOps
Utilizzare Model as a Service su Microsoft Azure
Le novità di Angular: i miglioramenti alla CLI
Utilizzare la session affinity con Azure Container Apps
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Eseguire una GroupBy per entity in Entity Framework
.NET Conference Italia 2023
Specificare il versioning nel path degli URL in ASP.NET Web API
Creare gruppi di client per Event Grid MQTT
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP