[Fixed] How to display the summary of error message on top of the form in angular reactive forms


i have Validation summary component as below:

The below component fetches the ngform but unable to subscribe to statuschanges/Valuechanges and display the summary of error message.

export class ValidationSummaryComponent implements OnInit {
  @Input() form: NgForm;
  errors: string[] = [];

 constructor() { }

ngOnInit() {
  if (this.form instanceof NgForm === false) {
  throw new Error('You must supply the validation summary with an NgForm.');
this.form.statusChanges.subscribe(status => {

 resetErrorMessages() {
this.errors.length = 0;

generateErrorMessages(formGroup: FormGroup) {
Object.keys(formGroup.controls).forEach(controlName => {
  const control = formGroup.controls[controlName];
  console.log('control.......... ', control);
  const errors = control.errors;
  console.log('control.errors.......... ', control.errors);

  if (errors === null || errors.count === 0) {
  // Handle the 'required' case
  if (errors.required) {
    this.errors.push(`${controlName} is required`);
  // Handle 'minlength' case
  if (errors.minlength) {
    this.errors.push(`${controlName} minimum length is ${errors.minlength.requiredLength}.`);
  // Handle custom messages.
  if (errors.message) {
    this.errors.push(`${controlName} ${errors.message}`);


and validation-summary.component.html

<div *ngIf="errors?.length > 0" class="validation-summary">
    <p>Please fix the following errors:</p>
  <li *ngFor="let error of errors">{{ error }}</li>


constructor(public formBuilder: FormBuilder) {
productFormGroup: FormArray;

ngOnInit() {

this.productFormGroup = this.formBuilder.array([]);
  this.ProductList.forEach(product => {
        productId: [product.productId],
        displayName: [product.displayName],
        productName: [product.productName, Validators.required]


dynamic-form.component.html that uses the validation summary.

    <div id="mainWrapper">
      <app-validation-summary-component [form]="userForm"></app-validation-summary-component> 
    <form #userForm="ngForm">
<div [formGroup]="product" *ngFor="let product of 
         <input  class="form-control" 
        formControlName="productName" required/>
      <button class="btn btn-primary" type="submit" 
              [disabled]="!productFormGroup.valid">Submit </button>
       <button class="btn btn-primary" style="margin-left: 30px" type="reset" 
       (click)="reset()"> Reset </button>

Need to display the summary of error messages on top of the dynamic form component displaying the list of label names that is blank/Invalid.


The way you are looping the formarray formgroup control is not proper inside validation-summary.component. Created stackblitz explains the solution.


Leave a Reply

(*) Required, Your email will not be published