Angular Forms

Mastering Angular Template-Driven Forms

Learning Outcome

4

Handle validation feedback in UI

3

Apply built-in and custom validators

2

Track form control states

1

Build Template-Driven Forms

Template-Driven Form

A Template-Driven Form is an Angular form where most of the logic is handled in the HTML template using directives like ngModel.

Examples:

  • Login form

  • Contact/Feedback form

  • Newsletter subscription

Creating Template-Driven Form

2. Add in module

imports: [FormsModule]

1. Import FormsModule

import { FormsModule } from '@angular/forms';

3. Create form in HTML

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <input 
    type="text" 
    name="username" 
    [(ngModel)]="user.name" 
    required
  >
  <button type="submit">Submit</button>
</form>

Creating Template-Driven Form

Explanation:

  • name → Required for Angular to track the control

  • [(ngModel)] → Enables two-way data binding

  • (ngSubmit) → Handles form submissio

  • required → Introduces validation early

Flow :

Built-in Validators

Common validators:

required

minlength

maxlength

pattern

<input 
  type="text"
  name="username" 
  ngModel
  required
  minlength="3"
  >

Custom Validator (Template-Driven)

Custom validation allows us to create our own rules when built-in validators are not enough.

Steps to Create Custom Validator

  1. Create a Directive

  2. Register it using NG_VALIDATORS

  3. Write validation logic in validate()

  4. Apply directive in HTML

Custom Validator (Template-Driven)

@Directive({
  selector: '[noSpace]',
  providers: [{ provide: NG_VALIDATORS, useExisting: NoSpaceValidator, multi: true }]
})
export class NoSpaceValidator {
  validate(control: any) {
    return control.value?.includes(' ')
      ? { noSpace: true }
      : null;
  }
}

No Space Validator

<input name="email" ngModel noSpace>

HTML Usage

  • "john doe" ❌ → Invalid (contains space)

  • "johndoe" ✅ → Valid

Handling Validation Feedback

Show errors dynamically

<input name="email" ngModel required #email="ngModel">
<p *ngIf="email.errors?.['required'] && email.touched">
  Email is required
</p>
  • Checks if field is empty and touched → shows "Email is required"
  • Improves user experience.

Summary

5

Validation feedback improves UX

4

Built-in validators ensure data validation

3

Angular tracks form states automatically

2

ngModel enables two-way binding

1

Template-driven forms use HTML-based approach

Quiz

Which module is required for template-driven forms?

A. ReactiveFormsModule

B. FormsModule

C. HttpClientModule

D. RouterModule

Quiz-answer

Which module is required for template-driven forms?

A. ReactiveFormsModule

B. FormsModule

C. HttpClientModule

D. RouterModule

Angular Forms: Mastering Angular Template-Driven Forms

By Content ITV

Angular Forms: Mastering Angular Template-Driven Forms

  • 1

More from Content ITV