Angular Template-driven Forms

Introduction

Forms are a fundamental part of web applications, allowing users to input data and interact with your application. Angular provides two approaches to handling forms: Reactive Forms and Template-driven Forms. This guide focuses on Template-driven Forms, which is often the simpler approach and a great starting point for beginners.

Template-driven forms rely heavily on directives in your HTML templates and allow you to build forms that are:

Easy to set up for simple scenarios
Similar to traditional HTML forms
Automatically tracked by Angular
Built with two-way data binding using ngModel

Let's dive into how to create, validate, and process forms using Angular's template-driven approach.

Prerequisites

Before you begin, make sure you have:

Basic understanding of Angular components
Angular project set up (Angular CLI installed)
Familiarity with HTML forms

Setting Up Your Project for Template-driven Forms

To use template-driven forms, you need to import the FormsModule from @angular/forms in your Angular module:

typescript
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // Import FormsModule
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // Add FormsModule to imports array
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Creating Your First Template-driven Form

Let's create a simple user registration form to understand the basics:

Step 1: Create a Component with Form Model

First, let's create a component with a model to store our form data:

typescript
// user-form.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.css']
})
export class UserFormComponent {
  // Model for our form
  user = {
    name: '',
    email: '',
    password: '',
    agreeTerms: false
  };

  onSubmit() {
    console.log('Form submitted!', this.user);
    // Here you would typically send data to a server
  }
}

Step 2: Create the Form Template

Now, let's create the corresponding HTML template:

html
<!-- user-form.component.html -->
<div class="container">
  <h2>User Registration</h2>
  
  <form #userForm="ngForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label for="name">Name</label>
      <input 
        type="text" 
        id="name" 
        name="name"
        class="form-control" 
        [(ngModel)]="user.name" 
        required 
        #name="ngModel">
      <div class="alert alert-danger" *ngIf="name.invalid && (name.dirty || name.touched)">
        Name is required.
      </div>
    </div>

    <div class="form-group">
      <label for="email">Email</label>
      <input 
        type="email" 
        id="email" 
        name="email"
        class="form-control" 
        [(ngModel)]="user.email" 
        required 
        email
        #email="ngModel">
      <div class="alert alert-danger" *ngIf="email.invalid && (email.dirty || email.touched)">
        <div *ngIf="email.errors?.['required']">Email is required.</div>
        <div *ngIf="email.errors?.['email']">Please enter a valid email.</div>
      </div>
    </div>

    <div class="form-group">
      <label for="password">Password</label>
      <input 
        type="password" 
        id="password" 
        name="password"
        class="form-control" 
        [(ngModel)]="user.password" 
        required 
        minlength="6"
        #password="ngModel">
      <div class="alert alert-danger" *ngIf="password.invalid && (password.dirty || password.touched)">
        <div *ngIf="password.errors?.['required']">Password is required.</div>
        <div *ngIf="password.errors?.['minlength']">Password must be at least 6 characters long.</div>
      </div>
    </div>

    <div class="form-check">
      <input 
        type="checkbox" 
        id="terms" 
        name="agreeTerms"
        class="form-check-input" 
        [(ngModel)]="user.agreeTerms" 
        required
        #terms="ngModel">
      <label class="form-check-label" for="terms">I agree to the terms and conditions</label>
      <div class="alert alert-danger" *ngIf="terms.invalid && (terms.dirty || terms.touched)">
        You must agree to the terms and conditions.
      </div>
    </div>

    <button type="submit" class="btn btn-primary" [disabled]="userForm.invalid">Register</button>
  </form>
</div>

Key Elements of Template-driven Forms

Let's break down the essential components of template-driven forms:

1. NgForm Directive

The NgForm directive is automatically attached to all <form> tags when you import FormsModule. You can access it with a template reference variable:

html
<form #userForm="ngForm" (ngSubmit)="onSubmit()">

This gives you access to the form's state, validity, and more.

2. NgModel Directive

The ngModel directive is the heart of template-driven forms. It creates a FormControl instance and binds it to a form control element. It enables two-way data binding:

html
<input type="text" [(ngModel)]="user.name" name="name">

The name attribute is required for ngModel to work correctly within forms.

3. Form Validation

Angular provides built-in validators like required, minlength, email, etc:

html
<input type="email" [(ngModel)]="user.email" required email>

4. Tracking Form and Control States

Angular automatically tracks form and control states:

pristine/dirty: Whether the user has changed the value
touched/untouched: Whether the control has been interacted with
valid/invalid: Whether the control passes validation

Form Validation in Detail

Form validation is crucial for ensuring data quality. Let's explore validation techniques:

Built-in Validators

Angular provides several built-in validators:

required: Field must have a value
minlength: Minimum number of characters
maxlength: Maximum number of characters
pattern: Matches a regular expression
email: Must be a valid email format

Displaying Validation Messages

You can show validation messages conditionally:

html
<input type="text" [(ngModel)]="user.name" required #name="ngModel">
<div *ngIf="name.invalid && (name.dirty || name.touched)">
  Name is required.
</div>

Styling Form Controls Based on Validation State

Angular automatically adds classes to elements based on their state:

css
/* Add to your component's CSS file */
.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}

Working with Form Data

Now that we understand how to create forms, let's discuss how to handle form data:

Submitting the Form

Use the ngSubmit event to handle form submission:

html
<form #userForm="ngForm" (ngSubmit)="onSubmit()">

typescript
onSubmit() {
  if (this.userForm.valid) {
    console.log('Form submitted!', this.user);
    // Send data to a server
  }
}

Example: HTTP Form Submission

Here's a real-world example of submitting form data to a server:

typescript
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html'
})
export class UserFormComponent {
  user = {
    name: '',
    email: '',
    password: '',
    agreeTerms: false
  };
  
  submitted = false;
  errorMessage = '';
  
  constructor(private http: HttpClient) { }
  
  onSubmit() {
    this.submitted = true;
    
    this.http.post<any>('https://api.example.com/register', this.user)
      .subscribe({
        next: response => {
          console.log('Registration successful!', response);
          // Reset form or navigate to another page
          this.resetForm();
        },
        error: error => {
          console.error('Registration failed!', error);
          this.errorMessage = 'Registration failed. Please try again.';
          this.submitted = false;
        }
      });
  }
  
  resetForm() {
    this.user = {
      name: '',
      email: '',
      password: '',
      agreeTerms: false
    };
    this.submitted = false;
    this.errorMessage = '';
  }
}

Don't forget to import HttpClientModule in your application module.

Practical Example: Contact Form

Let's build a real-world contact form:

Component Code:

typescript
// contact-form.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent {
  contactForm = {
    name: '',
    email: '',
    subject: '',
    message: '',
    priority: 'normal',
    contactMethod: 'email'
  };
  
  priorities = [
    {id: 'low', name: 'Low'},
    {id: 'normal', name: 'Normal'},
    {id: 'high', name: 'High'}
  ];
  
  contactMethods = [
    {id: 'email', name: 'Email'},
    {id: 'phone', name: 'Phone'},
    {id: 'mail', name: 'Mail'}
  ];

  submitted = false;
  
  onSubmit() {
    console.log('Form submitted!', this.contactForm);
    // In a real app, you would send this to your backend
    this.submitted = true;
  }
  
  newForm() {
    this.submitted = false;
    this.contactForm = {
      name: '',
      email: '',
      subject: '',
      message: '',
      priority: 'normal',
      contactMethod: 'email'
    };
  }
}

Template Code:

html
<!-- contact-form.component.html -->
<div class="container">
  <div *ngIf="!submitted">
    <h2>Contact Us</h2>
    <form #form="ngForm" (ngSubmit)="onSubmit()" novalidate>
      <div class="form-group">
        <label for="name">Name</label>
        <input 
          type="text" 
          class="form-control" 
          id="name" 
          name="name" 
          [(ngModel)]="contactForm.name" 
          required 
          #name="ngModel">
        <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
          Name is required.
        </div>
      </div>
      
      <div class="form-group">
        <label for="email">Email</label>
        <input 
          type="email" 
          class="form-control" 
          id="email" 
          name="email" 
          [(ngModel)]="contactForm.email" 
          required 
          email 
          #email="ngModel">
        <div *ngIf="email.invalid && (email.dirty || email.touched)" class="alert alert-danger">
          <div *ngIf="email.errors?.['required']">Email is required.</div>
          <div *ngIf="email.errors?.['email']">Please enter a valid email address.</div>
        </div>
      </div>
      
      <div class="form-group">
        <label for="subject">Subject</label>
        <input 
          type="text" 
          class="form-control" 
          id="subject" 
          name="subject" 
          [(ngModel)]="contactForm.subject" 
          required 
          #subject="ngModel">
        <div *ngIf="subject.invalid && (subject.dirty || subject.touched)" class="alert alert-danger">
          Subject is required.
        </div>
      </div>
      
      <div class="form-group">
        <label for="priority">Priority</label>
        <select 
          class="form-control" 
          id="priority" 
          name="priority" 
          [(ngModel)]="contactForm.priority">
          <option *ngFor="let priority of priorities" [value]="priority.id">
            {{ priority.name }}
          </option>
        </select>
      </div>
      
      <div class="form-group">
        <label>Preferred Contact Method</label>
        <div *ngFor="let method of contactMethods" class="form-check">
          <input 
            class="form-check-input" 
            type="radio" 
            name="contactMethod" 
            [id]="method.id" 
            [value]="method.id" 
            [(ngModel)]="contactForm.contactMethod">
          <label class="form-check-label" [for]="method.id">
            {{ method.name }}
          </label>
        </div>
      </div>
      
      <div class="form-group">
        <label for="message">Message</label>
        <textarea 
          class="form-control" 
          id="message" 
          rows="5" 
          name="message" 
          [(ngModel)]="contactForm.message" 
          required 
          minlength="10" 
          #message="ngModel">
        </textarea>
        <div *ngIf="message.invalid && (message.dirty || message.touched)" class="alert alert-danger">
          <div *ngIf="message.errors?.['required']">Message is required.</div>
          <div *ngIf="message.errors?.['minlength']">Message must be at least 10 characters long.</div>
        </div>
      </div>
      
      <button type="submit" class="btn btn-primary" [disabled]="form.invalid">Submit</button>
    </form>
  </div>
  
  <div *ngIf="submitted" class="success-message">
    <h3>Thank you for your message!</h3>
    <p>We've received your contact request with the following details:</p>
    <ul>
      <li><strong>Name:</strong> {{ contactForm.name }}</li>
      <li><strong>Email:</strong> {{ contactForm.email }}</li>
      <li><strong>Subject:</strong> {{ contactForm.subject }}</li>
      <li><strong>Priority:</strong> {{ contactForm.priority }}</li>
      <li><strong>Contact Method:</strong> {{ contactForm.contactMethod }}</li>
    </ul>
    <p>We'll get back to you soon.</p>
    <button class="btn btn-primary" (click)="newForm()">Send another message</button>
  </div>
</div>

Basic CSS for Styling the Form

css
/* contact-form.component.css */
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-control {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  padding: 10px;
  border-radius: 4px;
  margin-top: 5px;
}

.btn-primary {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.success-message {
  background-color: #dff0d8;
  padding: 20px;
  border-radius: 4px;
}

.form-check {
  margin-bottom: 10px;
}

.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}

Best Practices for Template-driven Forms

Always use the name attribute when using ngModel in forms
Provide visual feedback on form status (valid/invalid)
Show validation messages only after users interact with fields
Use appropriate HTML5 input types (email, number, etc.)
Group related form fields for better organization
Handle form submission errors gracefully
Reset forms after successful submission
Disable submit button when the form is invalid

Limitations of Template-driven Forms

While template-driven forms are easy to set up, they have some limitations:

Less suitable for complex forms with dynamic fields
Limited testing capabilities compared to reactive forms
Logic lives primarily in the template rather than the component
Less control over validation timing (primarily synchronous)

For advanced scenarios, consider using Angular's Reactive Forms approach.

Summary

Template-driven forms in Angular provide a straightforward way to create forms by leveraging directives directly in your HTML templates. In this guide, we covered:

Setting up template-driven forms with FormsModule
Using ngModel for two-way data binding
Implementing form validation with built-in validators
Displaying validation messages
Handling form submission
Building real-world examples like registration and contact forms

Template-driven forms are an excellent choice for simpler forms with straightforward validation requirements. As you advance, you might want to explore Reactive Forms for more complex scenarios.

Exercises

To reinforce your learning, try these exercises:

Create a login form with username and password validation
Build a newsletter subscription form with email validation
Create a user profile form with multiple form control types (text inputs, checkboxes, radio buttons, and dropdowns)
Add custom CSS to style your forms based on validation states
Implement a multi-step form wizard using template-driven forms

Additional Resources

Happy coding with Angular template-driven forms!

If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)

Introduction​

Prerequisites​

Setting Up Your Project for Template-driven Forms​

Creating Your First Template-driven Form​

Step 1: Create a Component with Form Model​

Step 2: Create the Form Template​

Key Elements of Template-driven Forms​

1. NgForm Directive​

2. NgModel Directive​

3. Form Validation​

4. Tracking Form and Control States​

Form Validation in Detail​

Built-in Validators​

Displaying Validation Messages​

Styling Form Controls Based on Validation State​

Working with Form Data​

Submitting the Form​

Example: HTTP Form Submission​

Practical Example: Contact Form​

Component Code:​

Template Code:​

Basic CSS for Styling the Form​

Best Practices for Template-driven Forms​

Limitations of Template-driven Forms​

Summary​

Exercises​

Additional Resources​