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>