Angular 18 Template Driven Form with Validation Example

In this post, I will show you how to create template driven form with validation in angular 18 application.

Angular 18 comes with forms that allow us to manage user input using ngModel and ngSubmit. With Template-driven forms in Angular 18, you can create uncomplicated and fundamental forms.

If your Angular 18 application involves a basic form, I recommend using Template-driven Forms. Below, I've provided a simple example of Template-driven Forms with validation in Angular 18.

You need to follow the below step to create template driven form in angular 18.

Step for Template Driven Form in Angular 18

• Step 1: Create Angular 18 Project
• Step 2: Update Component ts File
• Step 3: Form with ngModel
• Run Angular App

You need to follow the below steps to create template-driven forms in angular 18.

Step 1: Create Angular 18 Project

To begin, create a new Angular app for this demonstration. If you've already created one, there's no need to initiate a new Angular 18 app.

ng new my-new-app

Step 2: Update Component ts File

Import the necessary modules, including FormsModule and ReactiveFormsModule from the '@angular/forms' library, in the app.component.ts file.

src/app/app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
  
import { FormsModule } from '@angular/forms';
  
@Component({ 
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, FormsModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'firstApp';
   
  submit(form:any){
    var firstName = form.firstName;
    console.log(firstName);
    
    var lastName = form.lastName;
    console.log(lastName);
    
    var comment = form.comment;
    console.log(comment);
  }
    
}

Step 3: Form with ngModel

Implement the HTML form with ngModel. Bootstrap classes have been applied for styling.

I used bootstrap class on this form. if you want to add than then follow this link too: Install Bootstrap 5 to Angular 18.

src/app/app.component.html

<h1>Template Driven Forms Validation in Angular 18 Example - ItSolutionStuff.com</h1>
      
<form #contactForm="ngForm" (ngSubmit)="submit(contactForm.value)">
       
  <div class="form-group">
      <label for="firstName">First Name</label>
      <input required minlength="3" maxlength="10" ngModel name="firstName" type="text" #firstName="ngModel" class="form-control" id="firstName">
      <div class="alert alert-danger" *ngIf="firstName.touched & !firstName.valid">
          <div *ngIf="firstName.errors & firstName.errors['required']">
          First Name is required.
          </div>
          <div *ngIf="firstName.errors & firstName.errors['minlength']">
          First Name is minimum {{ firstName.errors & firstName.errors['minlength'].requiredLength }} character.
          </div>
          <div *ngIf="firstName.errors & firstName.errors['maxlength']">
          First Name is maximum 10 character.
          </div>
      </div>
  </div>
       
  <div class="form-group">
      <label for="lastName">Last Name</label>
      <input required ngModel name="lastName" type="text" #lastName="ngModel" class="form-control" id="lastName">
      <div class="alert alert-danger" *ngIf="lastName.touched & !lastName.valid">
          Last Name is required.
      </div>
  </div>
       
  <div class="form-group">
      <label for="comment">Comment</label>
      <textarea required ngModel #comment="ngModel" name="comment" id="comment" cols="30" rows="10" class="form-control"></textarea>
      <div class="alert alert-danger" *ngIf="comment.touched & !comment.valid">
          Comment is required.
      </div>
  </div>
        
  <button class="btn btn-primary" type="submit" [class.disabled]="!contactForm.valid">Submit</button>
      
</form>

Run Angular App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:

ng serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:4200

Output:

Now you can see layout as like bellow screen shot:

I hope it can help you...