Angular ofrece dos enfoques para formularios. Los formularios controlados por plantilla son simples y se definen en HTML; los formularios reactivos se definen en TypeScript y ofrecen más control — mejor para formularios complejos, dinámicos o fuertemente validados.
// just import FormsModule; minimal TS
<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
<input name="email" ngModel required email /> <!-- ngModel registers the field -->
<input name="password" ngModel required minlength="8" />
<button [disabled]="f.invalid">Submit</button>
</form>
La estructura del formulario y la validación viven en la plantilla a través de directivas ngModel. Simple de configurar, pero el modelo del formulario es implícito y más difícil de probar/manipular programáticamente.
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>
El formulario es un objeto explícito (FormGroup/FormControl) que construyes en TS. Esto lo hace observable, comprobable y fácil de manipular (agregar/eliminar campos, reaccionar a cambios mediante 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
Elegir el enfoque correcto para formularios es importante para el mantenimiento: controlado por plantilla para formularios rápidos y simples; reactivo para cualquier cosa compleja — asistentes de varios pasos, conjuntos de campos dinámicos, validación entre campos o formularios que necesiten pruebas unitarias.
El modelo explícito y observable de los formularios reactivos es generalmente preferible en aplicaciones serias porque es más potente, comprobable y escalable, aunque requiere más código inicialmente.