Template-Driven Forms

# CHAPTER 12

Template-Driven Forms #

1. Chapter Introduction #

2. Learning Objectives #

• Use ngModel for two-way binding in forms.

• Use required, minlength, email HTML validation attributes.

• Access the form's validation state via template reference variables.

• Display user-friendly error messages.

• Handle form submission.

3. Basic Template-Driven Form #

import { Component } from '@angular/core';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html'
})
export class RegisterComponent {
  name: string = '';
  email: string = '';
  password: string = '';

  onSubmit(): void {
    console.log({ name: this.name, email: this.email });
    alert('Registration successful!');
  }
}

<!-- register.component.html -->
<form #registerForm="ngForm" (ngSubmit)="onSubmit()">

  <div>
    <label>Full Name</label>
    <input
      type="text"
      name="name"
      [(ngModel)]="name"
      required
      minlength="3"
      #nameField="ngModel"
    />
    <div *ngIf="nameField.invalid && nameField.touched">
      <span *ngIf="nameField.errors?.[&#039;required']">Name is required.</span>
      <span *ngIf="nameField.errors?.[&#039;minlength']">Min 3 characters.</span>
    </div>
  </div>

  <div>
    <label>Email</label>
    <input
      type="email"
      name="email"
      [(ngModel)]="email"
      required
      email
      #emailField="ngModel"
    />
    <div *ngIf="emailField.invalid && emailField.touched">
      <span *ngIf="emailField.errors?.[&#039;required']">Email is required.</span>
      <span *ngIf="emailField.errors?.[&#039;email']">Enter a valid email.</span>
    </div>
  </div>

  <div>
    <label>Password</label>
    <input
      type="password"
      name="password"
      [(ngModel)]="password"
      required
      minlength="6"
      #passwordField="ngModel"
    />
    <div *ngIf="passwordField.invalid && passwordField.touched">
      <span *ngIf="passwordField.errors?.[&#039;required']">Password is required.</span>
      <span *ngIf="passwordField.errors?.[&#039;minlength']">Min 6 characters.</span>
    </div>
  </div>

  <!-- Disabled until form is valid -->
  <button type="submit" [disabled]="registerForm.invalid">Register</button>

</form>

4. Template Reference Variables #

• registerForm.valid / registerForm.invalid

• registerForm.submitted

• registerForm.value (all form values as an object)

Similarly, #nameField="ngModel" gives access to the individual control's state.

5. Styling Validation States #

• .ng-valid / .ng-invalid

• .ng-touched / .ng-untouched

• .ng-dirty / .ng-pristine

input.ng-invalid.ng-touched {
  border: 2px solid red;
}
input.ng-valid.ng-touched {
  border: 2px solid green;
}

6. Resetting the Form #

import { ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

export class RegisterComponent {
  @ViewChild('registerForm') form!: NgForm;

  onSubmit(): void {
    console.log(this.form.value);
    this.form.reset(); // Reset all values and validation states
  }
}

7. Common Mistakes #

• Missing name attribute: Every input in a Template-Driven form MUST have a name attribute. Without it, ngModel cannot register the control and the form submission will not include that field.

• Not importing FormsModule: Template-driven forms require FormsModule in the imports array of your module or standalone component.

8. Mini Project: Registration Form #

9. MCQs with Answers #

10. Interview Questions #

• Q: What is the role of #fieldName="ngModel" in a Template-Driven form?

• Q: Explain how Angular's automatic CSS classes (ng-valid, ng-invalid) help with UX design.

11. Summary #

12. Next Chapter Recommendation #