Template-Driven Forms: Build a Contact Form
Create a simple form using ngModel, validation, and submit handling.
Template-driven forms are easy to start with and great for simple forms. ## Step 1: Import FormsModule Standalone component: ```ts import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-contact', standalone: true, imports: [FormsModule], templateUrl: './contact.component.html', }) export class ContactComponent { model = { name: '', email: '', message: '', }; submit() { alert('Submitted: ' + JSON.stringify(this.model)); } } ``` ## Step 2: Template form ```html <form (ngSubmit)="submit()"> <label>Name</label> <input name="name" [(ngModel)]="model.name" required /> <label>Email</label> <input name="email" [(ngModel)]="model.email" required email /> <label>Message</label> <textarea name="message" [(ngModel)]="model.message" required></textarea> <button type="submit">Send</button> </form> ``` ## What’s happening - `[(ngModel)]` keeps values synced - `required` enables basic validation - `(ngSubmit)` runs when the form submits > Next: Reactive Forms, the best choice for bigger apps.