Template-Driven Forms: Build a Contact Form

Template-driven forms are easy to start with and great for simple forms.

Step 1: Import FormsModule

Standalone component:

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

<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.