Angular Simple Example to Show Form Validation Errors

Angular form validation simple example to show error message after the form is submitted, We have used FormGroup and FormControl and simple Angular Form Validation which displays the error message when the form is submitted, refer the below Steps to create the simple Validation form using Angular:

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