Angular offre due approcci ai form. I form template-driven sono semplici e definiti nell'HTML; i form reactive sono definiti in TypeScript e offrono più controllo — migliori per form complessi, dinamici o con validazione pesante.
// just import FormsModule; minimal TS
Submit
La struttura del form e la validazione risiedono nel template tramite direttive ngModel. Semplici da impostare, ma il modello del form è implicito e più difficile da testare/manipolare programmaticamente.
import { FormBuilder, Validators } from "@angular/forms";
export class SignupComponent {
constructor(private fb: FormBuilder) {}
form = this.fb.group({
email: ["", [Validators.required, Validators.email]],
password: ["", [Validators.required, Validators.minLength(8)]],
});
onSubmit() {
if (this.form.valid) console.log(this.form.value);
}
}
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input formControlName="email" />
<input formControlName="password" type="password" />
<button [disabled]="form.invalid">Submit</button>
</form>
Il form è un oggetto esplicito (FormGroup/FormControl) che costruisci in TS. Questo lo rende osservabile, testabile e facile da manipolare (aggiungere/rimuovere campi, reagire ai cambiamenti tramite valueChanges).
Template-driven Reactive
Where defined HTML (ngModel) TypeScript (FormBuilder)
Form model implicit/async explicit, synchronous object
Validation directives in template validators in code
Dynamic forms hard easy (add/remove controls in code)
Testability harder straightforward (it's just an object)
Best for simple forms complex/dynamic/validated forms
this.form.get("email")!.valueChanges.subscribe(v => ...); // react to changes
this.form.valid; // synchronous validity check
Scegliere l'approccio giusto per il form è importante per la manutenibilità: template-driven per form semplici e veloci; reactive per qualsiasi cosa complessa — wizard multi-step, insiemi di campi dinamici, validazione tra campi, o form che necessitano di test unitari.
Il modello esplicito e osservabile dei form reactive è generalmente preferito nelle applicazioni serie perché è più potente, testabile e scalabile, anche se richiede più codice iniziale.