Angular Forms Dynamic Validation Summary Errors

It's' not challenging task to show the Validation Summary Errors, when we are using Angular Reactive forms for great angular validation error management. If you still wants to show the validation error below the controls, then refer this article: Angular 8 Form Control Validation Error using Angular Material

Refer the following steps to show errors in Group Validation Summary in Angular 8+ Forms: 

Step 1: Add the following required Modules into app.module.ts configuration file:

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

Add the following imports in the @NgModule imports declaration.

imports:      [ BrowserModule, FormsModule, ReactiveFormsModule, BrowserAnimationsModule],

Step 2: Add the following code to add validation code at component level in your app.component.ts file as shown below:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  title = 'MyShopApp';
formSubmitted = false;
  public addShopFormGroup: FormGroup;
  constructor() { }
  ngOnInit() {
    this.addShopFormGroup = new FormGroup({
      propertyName : new FormControl('', [Validators.required, Validators.minLength(5), Validators.maxLength(20)]),
      propertyAddress : new FormControl('', [Validators.required, Validators.maxLength(200)])
    });
  }
  validationErrorExists() {
    return ((this.formSubmitted || this.addShopFormGroup.dirty) && !this.addShopFormGroup.valid);
  }
  formSubmit() {
    this.formSubmitted = true;
    if(this.addShopFormGroup.valid){
      alert("Form Submitted");
    }
  }
  public hasError = (controlName: string, errorName: string) => {
    return this.addShopFormGroup.controls[controlName].hasError(errorName);
  }
}

Step 3: Add the following html template code to display Angular Form: 

<div style="margin-left:20px;">
<h3>Add New Shop</h3>
<div class="example-container">
  <form [formGroup]="addShopFormGroup"  (ngSubmit)="formSubmit()" class="example-form">
    <div *ngIf="validationErrorExists();" style="color:red;">
        <div *ngIf="hasError('propertyName', 'required')">Shop Name is required</div>
        <div *ngIf="hasError('propertyName', 'maxlength')">You have more than 60 characters</div>
        <div *ngIf="hasError('propertyName', 'minlength')">Minimum length is 5 character</div>
        <div *ngIf="hasError('propertyAddress', 'required')">Shop Address is required</div>
        <div *ngIf="hasError('propertyAddress', 'maxlength')">You have more than 60 characters</div>
    </div>
    <p>
        <input formControlName="propertyName" placeholder="Shop Name" >
      </p>
      <p>
          <input formControlName="propertyAddress" placeholder="Shop Address" >
        </p>         
    <button type="submit">Submit</button>
  </form>
  </div>
</div>

This way you can show validation erros in summary at the top of the form, if you have any issues during development, you can refer it using following URL: https://stackblitz.com/edit/angular-8-form-validation-summary-error