Angular Simple Example to Show Form Validation Errors

Updated on: February 25, 2021

See the below steps to add and show form validation errors on Angular 6/8/11 Application:

Step 1: Create Angular Application using command: ng new AngularAppName

Step 2: Once Application is created, now Open Angular Application in Visual Studio Code using command: code .

Step 3: Add following imports into app.module.ts file : import { FormsModule, ReactiveFormsModule} from '@angular/forms'; and also add FormsModule & ReactiveFormsModule in imports block in @NgModule

See below complete app.module.ts file:

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

Step 4: Now, Add the following code to add FormGroup, FormControl and add Validations to the form control using below code in your app.component.ts file as shown below:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'SimpleValidationApp';
  formSubmitted = false;
  registrationFormGroup = new FormGroup({
    name: new  FormControl('', [Validators.required, Validators.minLength(5), Validators.maxLength(50)]),
    email: new FormControl('', [Validators.required,]),
    password: new FormControl('', [Validators.required, Validators.pattern('((?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,15})')])
  onSubmit(): void{
    this.formSubmitted = true;
    if (this.registrationFormGroup.valid){

Step 5: Add the following app.component.html template code to add validation on the form and show validation error below the Controls as shown below:

<form [formGroup]="registrationFormGroup" (ngSubmit)="onSubmit()">
  <input  type="text" formControlName="name" placeholder="name"><br>
  <span class="validation-error" *ngIf="(formSubmitted || &&">Name is required</span>
  <span class="validation-error" *ngIf="(formSubmitted ||  && ||">Name should be between 5 to 50 characters</span><br>
  <input  type="text" formControlName="email" placeholder="email"><br>
  <span class="validation-error" *ngIf="(formSubmitted ||  &&">Email is required</span>
  <span class="validation-error" *ngIf="(formSubmitted ||  &&">Please enter correct email id</span><br>
  <input  type="password" formControlName="password" placeholder="password"><br>
  <span class="validation-error" *ngIf="(formSubmitted || registrationFormGroup.controls.password.touched)  && registrationFormGroup.controls.password.errors?.required">Password is required</span>
  <span class="validation-error" *ngIf="(formSubmitted || registrationFormGroup.controls.password.touched)  && registrationFormGroup.controls.password.errors?.pattern">Please enter strong password(Should have Uppercase, lowercase, numbers & special characters</span><br>
  <button type="submit">Submit</button>

Step 6: Now, run the Angular application by running following command and see the below output: ng serve -o 

You can view the entire application and run it at: