Internationalization

Once @ngx-translate is configured (see Standalone or NgModule), the library resolves error messages from your translation files instead of a static errorMessages object.

Usage

<input
  type="password"
  formControlName="password"
  placeholder="Password"
  class="form-control"
  ngxErrorMessage
/>

import { regEx } from 'ngx-error-message' // Pattern validations bundled with the library

ngOnInit() {
  this.form = this.fb.group({
    password: [
      null,
      [
        Validators.required,
        Validators.minLength(6),
        Validators.maxLength(50),
        Validators.pattern(regEx.alphaNumeric),
      ],
    ],
  })
}

Translation file structure

Angular's error object always looks like { [validatorName]: true | { ... } } — for example, Validators.required produces { required: true }. Your translation file mirrors that under the validations key (or whatever you set as validationsPrefix):

{
  "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."
    }
  }
}

Keep the key names and the {{param}} placeholder exactly as shown — renaming them breaks message resolution. {{param}} is filled in with the validator's constraint value (for example, the 6 in Validators.minLength(6)).