ngx-validation-messages

Overview

Validation messages used by form controls of Angular.

Feature

• custom messages configuration
• Interpolate messages by Message parameters

Installation

To install this library, run:

$ npm install ngx-validation-messages --save

Choose the version corresponding to your Angular version:

Angular | version ----------- | ------------------- 6,7,8,9 | 2.x 5 | 1.x
4 | 0.x

Usage

1. import and configure for NgxValidationMessagesModule

e.g.

@NgModule({
  ...
  imports: [
    NgxValidationMessagesModule.configure({
      messages: {
        required: '{name} is required.',
        minlength: '{name} must be at least {min} characters long.'
      }
    })
  ],
  ...
})

2. Form
   1. Usage for Reactive Forms
   2. Usage for Template-driven Forms

'interpolate' method of NgxValidationMessagesService that return Array of validation message for each form

Example

{
  "name":["name is required","name must be at least 5."],
  "address":["address is required"]
}

<!-- app.component.html -->
<div class="container">
  <form #form="ngForm">
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" id="name" class="form-control" required name="name" [(ngModel)]="value">
      <div *ngIf="formErrors && formErrors.name.length > 0" class="alert alert-danger">
        <span *ngFor="let e of formErrors.name">
          {{ e }}
        </span>
      </div>
    </div>
  </form>
</div>

custom message configuration

'message' keyword of parameter is the message itself.

 config = {
    "name": {
      required: { message: "Name is invalid." }
    }
  };