Lo stessa struttura del form mostrata nelle pubblicazioni precedenti, tipizzazione inclusa, può essere ricreata utilizzando la classe FormBuilder. Nel caso in cui volessimo disabilitare tutti i campi nulli, la stesura risulterà anche più pulita, in quanto sarà l'istanza iniettata, NonNullableFormBuilder, a creare i controlli adatti senza la necessità di specificarne l'opzione.
import { NonNullableFormBuilder } from '@angular/forms'; @Component({}) export class AppComponent { // form default profileForm = this.fb.group({ firstName: this.fb.nonNullable.control(""), lastName: '', address: this.fb.group({ street: '', city: '', }) }); // form non nullabile profileForm1 = this.fb1.group({ firstName: '', lastName: '', address: this.fb.group({ street: '', city: '', }) }); constructor(private fb: FormBuilder,private fb1: NonNullableFormBuilder) {} }
Nello snippet seguente troviamo un caso comune di definizione di un FormGroup, nel quale il form è definito all'interno dell'implementaizone dell'interfaccia OnInit. Benchè questa formulazione sia corretta, non permette all'intellisense di pre-analizzare il codice e fornire il corretto supporto allo sviluppatore. In questo caso qualsiasi valore venga richiesto sarà interpretato come tipo any.
export class AppComponent implements OnInit { profileForm:FormGroup; constructor(private fb: FormBuilder) {} ngOnInit(){ profileForm = this.fb.group({ firstName: '' lastName: '' }); // any const formValues = profileForm.value; // any const name = profileForm.value.firstName; // any const lastname = profileForm.value.lastName; } }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire una GroupBy per entity in Entity Framework
Migrare una service connection a workload identity federation in Azure DevOps
Miglioramenti nell'accessibilità con Angular CDK
Utilizzare politiche di resiliency con Azure Container App
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Hosting di componenti WebAssembly in un'applicazione Blazor static
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Definire stili a livello di libreria in Angular
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Modificare i metadati nell'head dell'HTML di una Blazor Web App