TypeScript icon, indicating that this package has built-in type declarations

8.1.1 • Public • Published


Find more at libraries and examples at NgServe.io.

This library was generated with Nx.


The validation messages project alleviates developers from writing bloated markup for validation messages through a the ngServeValidationDisplay directive.

See the Video Tutorial on YouTube

Angular Reactive Forms Validation with @ngserveio/validation-messages

Running unit tests

Run nx test shared-ui-validation-display to execute the unit tests.


Import the module NgServeValidationDisplayModule into the consuming module.

  imports: [NgServeValidationDisplayModule],
export class SampleModule {}


The ValidationMessageService ships with default validation messages.

export const ValidationMessages: { [key: string]: string } = {
  required: '{{fieldName}} is required.',
  email: '{{fieldName}} is invalid.',
  minlength: 'Minimum length is {{requiredLength}}',
  maxlength: 'Maximum length is {{requiredLength}}',
  min: '{{fieldName}} is less than minimum value of {{min}}.',
  max: '{{fieldName}} exceeds maximum value of {{max}}.',
  uniqueEmail: '{{value}} is already taken',
  exists: '{{fieldName}} {{value}} does not exist',
  agreeToTerms: 'You must agree to our terms.',
  url: '{{fieldName}} has invalid url',
  alphanumeric: '{{fieldName}} must be alphanumeric characters.',
  unique: '{{fieldName}} exists and must be unique.',
  isNumeric: '{{fieldName}} must be a numeric value',

The validation messages consist of the key being a validation and string being a message template. The message template creates consistency for form validation messages.

Each key maps to a key on a FormControl's errors property.

The errors property implements a type of { [key:string]: any }, so validation errors can supply more information. e.g. min supplies the properties of min and actual.

To override these messages, use the addMessages method on the ValidationMessgeService.

Adding Messages

import { ValidationMessageService } from '@ngserveio/validation-display';

export class SampleModule() {
  constructor(private validationMessageService: ValidationMessageService) {
      min: '{{fieldName}} must be less than {{min}}.  {{actual}} was entered',
      isBetween: '{{fieldName}} must be between {{min}} and {{max}}.',
      required: 'Please enter a {{fieldName}}.'


The validation display directive alleviates the need to bloat html markup in form. In order to display the validation message, add the ngServeValidationDisplay providing the control and fieldName. The fieldName will be supplied as part of the message if the message template includes it.

Component Markup

<div [formGroup]="myForm">
  <input type="email" formControlName="email">
  <span [ngServeValidationDisplay]="emailControl" fieldName="Email">

Component Code

  template: './sample.component.html',
export class SampleComponent {
  public myForm = new FormGroup({
    email: new FormControl('', [Validators.required, Validators.email]),

  public get emailControl(): AbstractControl {
    return this.myForm.get('email');


The following validators are also shipped in this package.


Checks if the control has a value that isn't white space. This will return { required: true } if invalid, so it will use the required message template.


Checks if the value is numeric. Returns { isNumeric: true } using the isNumeric message template.


Uses a predicate check on the condition supplied and checks if controls' value is empty or whitespace.

public sampleForm = new FormGroup({
  email: new FormControl('', [
    requiredIf((ctrl: AbstractControl) => {
      const siblingControl = ctrl.parent.get('sibling');
      return siblingControl.value;

Package Sidebar


npm i @ngserveio/validation-messages

Weekly Downloads






Unpacked Size

45.3 kB

Total Files


Last publish


  • ngserve