Angular Template-Driven Forms

Template-driven forms are a simple way to create forms in Angular. These forms are primarily driven by the HTML template, and the form’s logic is handled using directives in the template. Here’s a step-by-step guide to creating and handling template-driven forms in Angular.

Create a Basic Template-Driven Form

Now, let’s create a simple form to collect user data like name and email.

Update app.component.html:

<div class="container">
  <h2>Contact Form</h2>
  <form #contactForm="ngForm" (ngSubmit)="onSubmit(contactForm)">
    <div class="form-group">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" ngModel required />
      <div *ngIf="contactForm.submitted && !contactForm.controls.name?.valid" class="error">
        Name is required.
      </div>
    </div>

    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" ngModel required />
      <div *ngIf="contactForm.submitted && !contactForm.controls.email?.valid" class="error">
        A valid email is required.
      </div>
    </div>

    <button type="submit" [disabled]="!contactForm.valid">Submit</button>
  </form>
  
  <div *ngIf="submitted">
    <h3>Form Submitted</h3>
    <p><strong>Name:</strong> {{ formData.name }}</p>
    <p><strong>Email:</strong> {{ formData.email }}</p>
  </div>
</div>

Explanation:

• The #contactForm="ngForm" directive creates a reference to the form.
• The ngModel directive binds form controls to properties in the component.
• The required attribute ensures that the fields are mandatory.
• We also added basic validation messages to display errors when the user tries to submit the form without filling in the required fields.

Handle Form Submission in Component

Now, let’s handle the form submission in app.component.ts:

Update app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  submitted = false;
  formData = { name: '', email: '' };

  onSubmit(form: any): void {
    this.submitted = true;
    this.formData = form.value; // Capture form data
  }
}

Explanation:

• The onSubmit() method is called when the form is submitted.
• We capture the form data using form.value and store it in formData.
• The submitted flag is set to true to display the form submission results below the form.

Add Styling for Better UX

You can add some basic CSS to make the form look better.

Update app.component.css:

.container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

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

.error {
  color: red;
  font-size: 12px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

button:disabled {
  background-color: #ddd;
}

Summary

Template-driven forms in Angular are easy to use and manage, especially for simpler forms. Key concepts include:

• ngForm: A directive to represent the form.
• ngModel: Two-way data binding to form controls.
• Validation: Use HTML validation attributes like required or Angular validators.

Template-driven forms are ideal for simple forms but for more complex scenarios with custom validations and dynamic form controls, reactive forms may be more appropriate.