Angular 31: Inmersión en Formularios Basados en Plantillas
easy⏱ 5 mincourseangular
FormsModule + [(ngModel)]: el modelo del formulario se infiere del DOM
Importa FormsModule en el arreglo imports de un componente standalone, luego vincula cada input con [(ngModel)]="algunaPropiedad" y un atributo name correspondiente — ese name es lo que Angular usa como clave dentro del FormGroup generado. No hay ningún new FormGroup(...) en la clase; la forma del formulario vive completamente en la plantilla.
@Component({
selector: 'app-login-form',
standalone: true,
imports: [FormsModule],
template: `
<form #loginForm="ngForm">
<input name="email" [(ngModel)]="credentials.email" />
<input name="password" type="password" [(ngModel)]="credentials.password" />
</form>
`,
})
export class LoginFormComponent {
credentials = { email: '', password: '' };
}
#loginForm="ngForm": una referencia viva al FormGroup oculto
#loginForm="ngForm" adjunta una variable de referencia de plantilla a la directiva que Angular coloca automáticamente en cada etiqueta <form> (NgForm). A través de ella puedes leer loginForm.valid, loginForm.value, loginForm.submitted, y el estado de cada control individual como loginForm.controls['email']?.touched — todo sin inyectar nada en la clase del componente.
<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
<!-- fields here -->
<button [disabled]="!loginForm.valid">Log in</button>
</form>
<pre>{{ loginForm.value | json }}</pre>
Basado en plantillas vs. Reactivo: cuándo usar cada uno
Los formularios basados en plantillas brillan en formularios pequeños y simples donde el modelo mental "plantilla primero" resulta cómodo — piensa en una caja de búsqueda rápida o un formulario de login. Los formularios reactivos (lecciones 32-34) cambian algo de verbosidad en la plantilla por un modelo de formulario que vive completamente en TypeScript, lo cual se paga rápido en cuanto necesitas campos dinámicos, validación cruzada compleja, o pruebas unitarias que no requieran una plantilla renderizada.