Template-Driven Forms in Angular
From the Angular cheat sheet · Forms · verified Jul 2026
Template-Driven Forms
Forms with ngModel and template validation
typescript
<!-- Basic form -->
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
<input name="name" [(ngModel)]="user.name" required>
<input name="email" [(ngModel)]="user.email" email>
<button type="submit" [disabled]="!myForm.valid">
Submit
</button>
</form>
// Component
onSubmit(form: NgForm) {
if (form.valid) {
console.log(form.value);
}
}💡 Template-driven forms are simpler for basic forms
⚡ Use template reference variables for validation
📌 ngModelGroup creates nested form groups
🔥 Import FormsModule to use template-driven forms