如何用角度 i18n 翻译表单错误？答案

【问题标题】：How to translate form errors with angular i18n?如何用角度 i18n 翻译表单错误？
【发布时间】：2017-08-21 08:41:12
【问题描述】：

我正在为 angular 开发 i18n，我想为表单错误提供翻译。但我不知道该怎么做。我按照angular website 的指南进行操作。我尝试使用 select 方法，但它不起作用。

最初，在尝试翻译之前，我的 component.ts 中有以下代码：

onValueChanged(data?: any) {
  if (!this.userForm) { return; }
  const form = this.userForm;

  for (const field in this.formErrors) {
    // clear previous error message (if any)
    this.formErrors[field] = '';
    const control = form.get(field);

    if (control && control.dirty && !control.valid) {
      const messages = this.validationMessages[field];
      for (const key in control.errors) {
        this.formErrors[field] += messages[key] + ' ';
      }
    }
  }
}

formErrors = {
  'firstname': ''
};

validationMessages = {
   'firstname': {
     'required': 'Firstname is required.',
     'pattern': 'Only alphabetics caracters are allowed.'
   }
};

以及我的component.html中的以下代码：

<div *ngIf="formErrors.firstname" class="form-control-feedback alert">
  {{ formErrors.firstname }}
</div>

它工作得很好，因为没有翻译。然后，我做了以下更新：

在component.ts中：

validationMessages = {
  'firstname': {
    'required': 'required',
    'pattern': 'pattern'
  }
};

在component.html中：

<div *ngIf="formErrors.firstname" class="form-control-feedback alert">
  <ng-container i18n="@@userModalFirstnameError">
    {formErrors.firstname, select, required {required} pattern {pattern}}
  </ng-container>
</div>

在 messages.fr.xlf 文件中，我有这个：

<trans-unit id="userModalFirstnameError" datatype="html">
  <source>{VAR_SELECT, select, required {required} pattern {pattern} }</source>
  <target>
    {VAR_SELECT, select, required {Nom utilisateur obligatoire} pattern {pattern}}
  </target>
  ...
</trans-unit>

很遗憾，此解决方案不起作用。

【问题讨论】：

只有我有这种要求吗？任何想法将不胜感激！ :) 谢谢

标签： forms angular validation internationalization

【解决方案1】：

我终于找到问题出在哪里了。其实有2个错误。

第一个与 .xlf 文件中的“VAR_SELECT”有关。它是由 Angular 使用构建命令 => "ng-xi18n --i18nFormat=xlf" 生成的。如果使用“直接”变量（例如，如果我输入“{toto, select, required {required} pattern {pattern}}”并且 toto 等于“required”），则此“VAR_SELECT”效果很好。但是，如果使用表中的变量（这是我使用变量“formErrors.firstname”的情况），它似乎不起作用。所以我用我的变量 'formErrors.firstname' 的名称替换了 .xlf 文件中的 'VAR_SELECT'。
第二个在“onValueChanged”函数中：
```
for (const key in control.errors) {
  this.formErrors[field] += messages[key] + ' ';
}
```
由于末尾的空格字符，该变量与定义的值之一不匹配（例如，它是“必需的”，而我应该是“必需的”。注意第一个值末尾的额外空格)

【讨论】：