Template-Driven Forms

Relax. We'll talk through this in plain words — no textbook voice.

Template-Driven Forms build forms right in the HTML template using the ngModel directive.

⚠️ Important: FormsModule needs to be imported.

typescript

// app.module.ts
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [FormsModule]
})

// component.html
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <div>
    <label>Name:</label>
    <input type="text" name="name" [(ngModel)]="user.name" required>
  </div>
  
  <div>
    <label>Email:</label>
    <input type="email" name="email" [(ngModel)]="user.email" required email>
  </div>
  
  <button type="submit" [disabled]="!userForm.valid">Submit</button>
</form>

// component.ts
export class MyComponent {
  user = { name: '', email: '' };
  
  onSubmit(form: NgForm) {
    console.log('Form Data:', this.user);
    console.log('Form Valid:', form.valid);
  }
}

You should see

(The form includes validation and can only be submitted once it's valid)