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';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ],
  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';
@Component({
  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, Validators.email]),
    password: new FormControl('', [Validators.required, Validators.pattern('((?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,15})')])
  });
  onSubmit(): void{
    this.formSubmitted = true;
    if (this.registrationFormGroup.valid){
      return;
    }
  }
}

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:

<style>
  .validation-error{
    color:red;
  }
</style>
<form [formGroup]="registrationFormGroup" (ngSubmit)="onSubmit()">
  <input  type="text" formControlName="name" placeholder="name"><br>
  <span class="validation-error" *ngIf="(formSubmitted || registrationFormGroup.controls.name.touched) && registrationFormGroup.controls.name.errors?.required">Name is required</span>
  <span class="validation-error" *ngIf="(formSubmitted || registrationFormGroup.controls.name.touched)  && registrationFormGroup.controls.name.errors?.minlength || registrationFormGroup.controls.name.errors?.maxlength">Name should be between 5 to 50 characters</span><br>
  <input  type="text" formControlName="email" placeholder="email"><br>
  <span class="validation-error" *ngIf="(formSubmitted || registrationFormGroup.controls.email.touched)  && registrationFormGroup.controls.email.errors?.required">Email is required</span>
  <span class="validation-error" *ngIf="(formSubmitted || registrationFormGroup.controls.email.touched)  && registrationFormGroup.controls.email.errors?.email">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>
</form>

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: https://stackblitz.com/edit/angular-simple-example-to-show-form-validation-errors?file=src/app/app.component.html