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;