Angular 6 Form Validation Using Template-Driven Forms

In this example show you, how to form Validation in angular 6 using Template driven Forms, It's a Simple registration form with standard fields First name, Last name, email, and Password, all field are required, and email and password have 2 errors messages, one for required and second is "Email must be a valid email Address" and for Password have "Password must be at least 6 characters"

Watch This article in Youtube Video Reactive Form

In this example uses Bootstrap 4 css for styling and 'is-invalid' class used for invalid field design

Working Demo: Template driven Forms

In App Module

First, import the FormsModule from '@angular/forms' and include it in the imports array of the @NgModule decorator in the app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';

import { AppComponent } from './app.component';
import { FormvalidationComponent } from './formvalidation/formvalidation.component';


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

In the Forms Validation App Component .ts file

In Component .ts file define a model object, its bound to the form fields data from the app component template html.

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

@Component({
  selector: 'app-formvalidation',
  templateUrl: './formvalidation.component.html',
  styleUrls: ['./formvalidation.component.css']
})

export class FormvalidationComponent implements OnInit {
  model:any = {}
  constructor() { }
  ngOnInit() {
  }
  onSubmit() {
    alert(JSON.stringify(this.model))
  }
}

Forms Validation App Template HTML

In the app component template html have all the html markup for the example registration form in your browser. First we need to define template variable like #f="ngForm" in form tag and form input define template variable like #firstName="ngModel" and used [(ngModel)] directive to bind to properties of the model object defined in the app complanet. and used required, minlength and email attributes for Validation field, In the Angular framework contains directives that match these attributes with built-in validator functions

   
<divclass="container">
        <divclass="row">
            <divclass="col-12">
                <divclass="jumbotron">
                    <h2>Angular 6 Form validation</h2>
                    <formname="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm"novalidate>
                        <divclass="form-group">
                            <labelfor="firstName">First Name</label>
                            <inputtype="text"class="form-control" [(ngModel)]="model.firstName" #firstName="ngModel" [ngClass]="{'is-invalid':f.submitted && firstName.invalid}"name="firstName"required />
                            <divclass="invalid-feedback">
                                <div>First Name is required</div>
                            </div>
                        </div>
                        <divclass="form-group">
                            <labelfor="lastName">Last Name</label>
                            <inputtype="text"class="form-control" [(ngModel)]="model.lastName" #lastName="ngModel" [ngClass]="{'is-invalid':f.submitted && lastName.invalid}"name="lastName"required />
                            <divclass="invalid-feedback">
                                <div>Last Name is required</div>
                            </div>
                        </div>
                        <divclass="form-group">
                            <labelfor="email">Email</label>
                            <inputtype="text"class="form-control" [(ngModel)]="model.email" #email="ngModel" [ngClass]="{'is-invalid':f.submitted && email.invalid}"name="email"requiredemail />
                            <div *ngIf="f.submitted && email.invalid"class="invalid-feedback">
                                <div *ngIf="email.errors.required">Email Name is required</div>
                                <div *ngIf="email.errors.email">Email must be a valid email Address</div>
                            </div>
                        </div>
                        <divclass="form-group">
                            <labelfor="password">Password</label>
                            <inputtype="password"class="form-control" [(ngModel)]="model.password" #password="ngModel" [ngClass]="{'is-invalid':f.submitted && password.invalid}"name="password"requiredminlength="6" />
                            <div *ngIf="f.submitted && password.invalid"class="invalid-feedback">
                                <div *ngIf="password.errors.required">Password Name is required</div>
                                <div *ngIf="password.errors.minlength">Password must be at least 6 characters</div>
                            </div>
                        </div>
                        <divclass="form-group">
                            <buttonclass="btn btn-primary">Register</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

Watch This article in Youtube Video Reactive Form