如何在 Ionic 4 中使用 ngx-translate 翻译验证消息答案

【问题标题】：How to translate validation massage using ngx-tranlate in Ionic4如何在 Ionic 4 中使用 ngx-translate 翻译验证消息
【发布时间】：2020-01-07 12:07:19
【问题描述】：

我正在使用 ngx-translateliterature 设置我的 ionic4 应用程序以使用两种语言 ar 和 en，并且我有两个 JSON 文件 en.json nad ar.json 具有这样的结构

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

我在 html 文件中添加了这个

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

到目前为止一切正常
但现在的问题是如何使用这种结构翻译表单验证消息。

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."
  }
]
};

我在 HTML 中添加了这个

{{validation.message }}

这仅返回英语，现在可以正常工作了如何将其翻译成两种语言 ar 并使用动态验证消息，如 validation_messages 结构对象

I 正则翻译我将字符串名称替换为 {{ 'REGISTRATION.name' |翻译：参数}}

现在如何替换 {{validation.message }} 之类的。

【问题讨论】：

标签： angular ionic-framework ionic3 ionic4 ngx-translate

【解决方案1】：

大家好，我提出了一些可能不是最佳实践的方法，但它对我来说只需 3 个步骤即可第1步：我将key作为消息值添加validation_messages改成这个结构。

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"
  }
]
  };

第 2 步：将所有验证消息添加到 en 和 ar JSON 文件中的键像这样

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

第三步：在html文件中替换

{{validation.message }}

到

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

仅此而已，这对我来说很好。

【讨论】：