Configuration

Both provideNgxErrorMessage() and NgxErrorMessageModule.forRoot() accept the same ErrorMessageConfig object:

interface ErrorMessageConfig {
  validationsPrefix?: string
  patternsPrefix?: string
  errorMessages?: Record<string, string | Record<string, string>>
}

With internationalization

When @ngx-translate is set up, the library reads messages from your translation JSON files instead of errorMessages. Create a file per language — for example assets/i18n/en.json — with a top-level key matching validationsPrefix (default: validations):

{
  "validations": {
    "required": "The field is required.",
    "maxlength": "The maximum length allowed is {{param}}.",
    "minlength": "The minimum allowed length is {{param}}.",
    "email": "It is not a valid email.",
    "min": "The minimum allowed is {{param}}.",
    "max": "The maximum allowed is {{param}}.",
    "pattern": {
      "numeric": "The valid format is numeric.",
      "alphabet": "The valid format is alphabetical.",
      "smallLetters": "The valid format is lowercase letters.",
      "capitalLetters": "The valid format is capital letters.",
      "alphaNumeric": "The valid format is alphanumeric.",
      "phoneNumber": "Invalid phone number.",
      "websiteUrl": "Invalid website URL.",
      "ip": "Invalid IP address."
    }
  }
}

Each key matches an Angular validator error name — for example, a control with Validators.required produces control.errors = { required: true }, and the library looks up validations.required for its message. Keep the key names and the {{param}} placeholder exactly as shown; renaming them breaks message resolution. See Internationalization for more detail.

Without internationalization

Pass a matching object literal to errorMessages instead:

errorMessages: {
  required: 'This field is required.',
  maxlength: 'The maximum allowed length is {{param}}.',
  minlength: 'The minimum allowed length is {{param}}.',
  email: 'This is not a valid email address.',
  min: 'The minimum allowed value is {{param}}.',
  max: 'The maximum allowed value is {{param}}.',
  pattern: {
    numeric: 'The valid format is numeric.',
    alphabet: 'The valid format is alphabetic.',
    smallLetters: 'The valid format is lowercase letters.',
    capitalLetters: 'The valid format is uppercase letters.',
    alphaNumeric: 'The valid format is alphanumeric.',
    phoneNumber: 'Invalid phone number.',
    websiteUrl: 'Invalid website URL.',
    ip: 'Invalid IP address.',
    custom: "The valid format is alphanumeric and '.' is allowed.",
  },
  avoidMultipleZero: 'It cannot start with multiple zeros.',
},

Required styles

Add these classes to your global stylesheet — customize or drop the border/color rules as you like:

.error-container {
  border: 1px solid red;
  color: red;
}

.error-message {
  color: red;
}

See Custom Class Names to use different class names per directive instance.