How to translate validation massage using ngx-tranlate in Ionic4

Question

I'm setting up my ionic4 application to work with two languages ar and en using ngx-translate literary and I have two JSON file en.json nad ar.json with the structure like this

{
  "LOGIN": {
  "login": "Login",
  "emailOrPhone":"EMAIL OR PHONE",
  "password":"PASSWORD",
  "emailOrPhonePlac":"Enter Email Address or Phone",
  "passwordPlac":"Enter Password",
  "facebook":"Facebook",
  "google":"Google"
},
 "REGISTRATION": {
  "signUp":"Sign Up",
  "name":"Name",
  "email":"Email",
  "mobile":"Mobile",
  "password":"Password",
  "address":"Address",
  "namePlac":"Enter user name",
  "emailPlac":"Enter email address",
  "mobilePlac":"Enter mobile number",
  "passwordPlac":"Enter password",
  "addressPlac":"Enter address"
 }
}

and I'm adding this is in html file

{{ 'REGISTRATION.name' | translate:params}}

until now this is working fine
but the problem now how to translate form validation massage withe this structure.

validation_messages = {
 name: [
   { type: "required", message: "name" },
   {
     type: "pattern",
     message: "Your User name  must contain Aa  letters only ."
   },
   {
     type: "minlength",
     message: "User name must be at least 5 characters long."
   }
 ],
 email: [
   { type: "required", message: "Email is required." },
   {
     type: "pattern",
     message: "Your Email must contain @ and letters number is 
optional."
   },
   { type: "email", message: "Your Email not valid." }
 ],
 mobile: [{ type: "required", message: "Mobile number is required." 
     }],
password: [
  { type: "required", message: "Password is required." },
  {
    type: "minlength",
    message: "Password must be at least 5 characters long."
  }
]
}; 

I add this in HTML

{{validation.message }}

This return English only and this is work fine now how to translate this to two languages ar and en withe dynamic validation message like validation_messages structure object

I Regular Translation I replace string Name to {{ 'REGISTRATION.name' | translate:params}}

Now how to replace {{validation.message }} to somthing lik that.

Answer 1

Hi everyone I tray something maybe not the best practices but it works fine with me in 3 steps step 1: I will add the key as a message value validation_messages changed to this structure.

validation_messages = {
name: [
  { type: "required", message: "nameRequired" },
  {
    type: "pattern",
    message: "namePattern"
  },
  {
    type: "minlength",
    message: "nameMinlenth"
  }
],
email: [
  { type: "required", message: "emailRequired" },
  {
    type: "pattern",
    message: "emailPattern"
  },
  { type: "email", message: "emailEmail" }
],
mobile: [{ type: "required", message: "mobileRequired" }],
password: [
  { type: "required", message: "passwordRequired" },
  {
    type: "minlength",
    message: "passwordMinlength"
  }
]
  };

step 2: add all validation message to keys in en and ar JSON files Like this

  {
 "LOGIN": {
  "login": "Login",
  "emailOrPhone":"EMAIL OR PHONE",
  "password":"PASSWORD",
  "emailOrPhonePlac":"Enter Email Address or Phone",
  "passwordPlac":"Enter Password",
  "facebook":"Facebook",
  "google":"Google" 
},
 "REGISTRATION": {
  "signUp":"Sign Up",
  "name":"Name",
  "email":"Email",
  "mobile":"Mobile",
  "password":"Password",
  "address":"Address",
  "namePlac":"Enter user name",
  "emailPlac":"Enter email address",
  "mobilePlac":"Enter mobile number",
  "passwordPlac":"Enter password",
  "addressPlac":"Enter address",
  "nameRequired":"User name is required.",
  "namePattern":"Your User name  must contain Aa  letters only .",
  "nameMinlenth":"User name must be at least 5 characters long.",
  "emailRequired":"Email is required.",
  "emailPattern":"Your Email must contain @ and letters number is optional.",
  "emailEmail":"Your Email not valid.",
  "mobileRequired":"Mobile number is required.",
  "passwordRequired":"Password is required.",
  "passwordMinlength":"Password must be at least 5 characters long."
 }
}

step 3: in html file replace

{{validation.message }}

to

{{ 'REGISTRATION.'+validation.message | translate:params}}

that is all and this is work fine for me.