Con questa serie di script parleremo della funzionalità, all'interno di Angular, per avere una tipizzazione delle form. Parlando in contesto Angular: ogni elemento all'interno del FormGroup avrà un suo tipo specifico. Questa condizione tornerà utile in fase di lettura e assegnazione, riuscendo ad evitarci possibili errori sui tipi e velocizzando lo sviluppo, e sarà automatico: non avremo bisogno di modificare alcuna riga di codice! In questa piccola introduzione andremo a vedere i cambiamenti, i possibili errori che deriveranno dall'aggiornamento e come si esegue una corretta migrazione.
Iniziamo dando una definizione di massima sui Reactive form: che cosa sono? In Angular abbiamo due diverse modalità per definire i form, la prima proveniente da un modulo chiamato FormsModule, la quale permette di strutturare e gestire un form direttamente all'interno dell'HTML, sfruttando attributi personalizzati per ogni controllo, metodologia indicata per form con una struttura semplice e senza complesse validazioni.
La seconda tipologia di form, definita all'interno di ReactiveFormsModule, permette una definizione di un oggetto form, o FormGroup, all'interno del quale inserire vari controlli, FormControl. Il form verrà poi collegato tramite degli attributi al form HTML, e sarà il framework a gestirne il valore, lo stato e la validazione sulla base di quanto abbiamo definito.
profileForm = new FormGroup({ firstName: new FormControl(''), lastName: new FormControl(''), });
Il FormGroup ci permetterà di controllare lo stato di un form così costruito.
<form [formGroup]="profileForm"> <label for="first-name">First Name: </label> <input id="first-name" type="text" formControlName="firstName"> <label for="last-name">Last Name: </label> <input id="last-name" type="text" formControlName="lastName"> </form>
Utilizzando la seguente istruzione potremmo ottenere i valori inseriti, strutturati allo stesso modo in cui abbiamo definito il form.
const firstName = profileForm.value.firstName; 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
Code scanning e advanced security con Azure DevOps
Reactive form tipizzati con FormBuilder in Angular
Ottimizzazione dei block template in Angular 17
Usare un KeyedService di default in ASP.NET Core 8
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Utilizzare politiche di resiliency con Azure Container App
Gestione degli stili CSS con le regole @layer
Reactive form tipizzati con modellazione del FormBuilder in Angular
Estrarre dati randomici da una lista di oggetti in C#
Criptare la comunicazione con mTLS in Azure Container Apps
Utilizzare i primary constructor di C# per inizializzare le proprietà