ngx-valdemort gives you simpler and cleaner error messages to validate your Angular components.

angular reactive form validation error message, how to display error message in angular, angular display error message, angular error message display

Info and Error Message Boxes Styled with jQuery UI

How to make use of it:

Installation:

Using the CLI:
ng add ngx-valdemort

Using npm:
npm install ngx-valdemort

Using yarn:
yarn add ngx-valdemort

1. ngx-valdemort allows writing the above form in a simpler and cleaner way using the ValidationErrors component:

<form [formGroup]="form" (ngSubmit)="submit()">
  <input formControlName="email" type="email" />
  <val-errors controlName="email">
    <ng-template valError="required">The email is required</ng-template>
    <ng-template valError="email">The email must be a valid email address</ng-template>
  </val-errors>

  <input formControlName="age" type="number" />
  <val-errors controlName="age">
    <ng-template valError="required">The age is required</ng-template>
    <ng-template valError="max" let-error="error">You must be at least {{ error.min }} years old</ng-template>
  </val-errors>

  <button>Submit</button>
</form>

2. Even better, you can define the default error messages once, use them everywhere, and still override them when needed:

<form [formGroup]="form" (ngSubmit)="submit()">
  <input formControlName="email" type="email" />
  <val-errors controlName="email" label="The email"></val-errors>

  <input formControlName="age" type="number" />
  <val-errors controlName="age" label="The age">
    <ng-template valError="max" let-error="error">You must be at least {{ error.min }} years old</ng-template>
  </val-errors>

  <button>Submit</button>
</form>

3. It works with ngModel too!

<input class="form-control" type="email" name="email" [(ngModel)]="user.email" required email #emailCtrl="ngModel" />
<val-errors [control]="emailCtrl.control" label="The email"></val-errors>

Angular Validation Error Messages, ngx-valdemort Plugin/Github, angular forms show validation errors on submit, angular seterrors custom message

See Demo And Download

Official Website(Ninja-Squad): Click Here

This superior jQuery/javascript plugin is developed by Ninja-Squad. For extra Advanced usage, please go to the official website.