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
Utilizzare gRPC su App Service di Azure
Eseguire attività basate su eventi con Azure Container Jobs
Usare il colore CSS per migliorare lo stile della pagina
Sostituire la GitHub Action di login su private registry
Utilizzare un numero per gestire la concorrenza ottimistica con SQL Server ed Entity Framework
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Eseguire una query su SQL Azure tramite un workflow di GitHub
Generare velocemente pagine CRUD in Blazor con QuickGrid
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Aggiungere interattività lato server in Blazor 8
Utilizzare politiche di resiliency con Azure Container App