Angular 32: Fundamentos de Formularios Reactivos
easy⏱ 5 mincourseangular
El modelo del formulario vive en la clase, no en la plantilla
Un FormGroup es una bolsa nombrada de FormControls (o FormGroups/FormArrays anidados). Construirlo en TypeScript significa que toda la forma, los valores iniciales y — pronto — las reglas de validación están en un solo lugar, legibles sin tener que recorrer una plantilla.
form = new FormGroup({
name: new FormControl(''),
email: new FormControl(''),
message: new FormControl(''),
});
inject(FormBuilder): el mismo modelo, menos código repetitivo
FormBuilder es un pequeño servicio inyectable con métodos ayudantes .group(), .control() y .array() que construyen exactamente las mismas instancias de FormGroup/FormControl/FormArray que construirías a mano con new, solo que con menos código. inject(FormBuilder) lo obtiene sin necesidad de un constructor.
private fb = inject(FormBuilder);
form = this.fb.group({
name: [''],
email: [''],
message: [''],
});
[formGroup] en la etiqueta, formControlName en cada campo
[formGroup]="form" en el elemento <form> le indica a Angular a qué modelo vincularse; formControlName="name" en cada input conecta luego ese campo específico por su clave. A diferencia de [(ngModel)], no se necesita sintaxis de doble vinculación — la instancia de FormControl es la única fuente de verdad.