Moduli reattivi

In questa lezione imparerà a conoscere i form reattivi, che gestiscono scenari complessi dei form nelle applicazioni Angular.

I form reattivi utilizzano un approccio programmatico per creare e gestire i form, offrendo maggiore flessibilità e più possibilità di convalida.

Per utilizzare i form reattivi, importare ReactiveFormsModule nel modulo:

import { ReactiveFormsModule } from '@angular/forms';

Definire un gruppo di form nella classe del componente:

this.myForm = new FormGroup({
  name: new FormControl('')
});

Utilizzare la direttiva formGroup nel template per collegare il gruppo di form:

<form [formGroup]="myForm">
  <input formControlName="name">
</form>

È possibile aggiungere facilmente i validators ai form reattivi per garantire la correttezza degli input:

name: new FormControl('', Validators.required)

Gestire l'invio dei form sottoscrivendosi agli eventi submit nella classe del componente:

onSubmit() {
  console.log(this.myForm.value);
}

Il servizio FormBuilder semplifica la creazione dei form:

this.myForm = this.fb.group({
  name: ['', Validators.required]
});

Ora sa come creare form reattivi, gestire le convalide e amministrare efficacemente lo stato del form. Ottimo lavoro!