Template Driven Forms Validation in Angular 9/8 Example

Step 1: Install Angular App

Here, in this step you need to create new ng app for this demo. if you have already created then don’t create new angular 8 app.

ng new my-new-app

Step 2: Import FormsModule

If you want to create form in angular app then you need to import FormsModule from @angular/forms library. so let’s add following code to app.module.ts file.

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Form with ngModel

In this step, we will write code of html form with ngModel. so add following code to app.component.html file.

I used bootstrap class on this form. if you want to add than then follow this link too: Install Boorstrap 4 to Angular 8.

src/app/app.component.html

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

Step 4: updated Ts File

In ts file. we will write submit() and get all input fields values. so let’s add following code to app.component.ts file.

src/app/app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  submit(form){
    var firstName = form.firstName;
    console.log(firstName);
    var lastName = form.lastName;
    console.log(lastName);
    var comment = form.comment;
    console.log(comment);
  }
}

Now you can run your application using following command:

ng serve

Now you can see layout as like bellow screen shot:

I hope it can help you…