Question

我正在使用i18n for angular，我想提供表单错误的翻译。但我不知道该怎么做。我按照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>

不幸的是，这个解决方案不起作用。

Answer 1

我终于找到了问题的来源。实际上，有2个错误。

第一个与＆＃39; VAR_SELECT＆＃39;相关。在.xlf文件中。它由Angular生成，构建命令=＆gt; ＆＃34; ng-xi18n --i18nFormat = xlf＆＃34;。这个＆＃39; VAR_SELECT＆＃39;如果＆＃34;直接＆＃34;使用变量（例如，如果我把＆＃34; {toto，select，required {required} pattern {pattern}}＆＃34;并且toto等于＆＃34; required＆＃34;）。但是如果使用表中的变量（这是我的变量＆＃34; formErrors.firstname＆＃34;），它似乎不起作用。所以我更换了＆＃39; VAR_SELECT＆＃39;在.xlf文件中的变量名称＆＃39; formErrors.firstname＆＃39;。
第二个是在＆＃34; onValueChanged＆＃34;功能：
```
for (const key in control.errors) {
  this.formErrors[field] += messages[key] + ' ';
}
```
由于末尾的空格字符，变量与定义的值之一不匹配（例如，它是必需的＆＃39;我需要的地方＆＃39;要求＆＃39;。请注意第一个值末尾的额外空格）

如何用angular i18n翻译表单错误？

1 个答案: