如何使用角度 i18n 翻译表单错误?

Question

我正在为 angular 开发 i18n，我想为表单错误提供翻译。但我不知道该怎么做。我遵循了角度网站的指南。我尝试使用选择方法，但它不起作用。

最初，在尝试翻译之前，我的 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.'
}
};

我的组件中的以下代码.html：

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

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

在组件.ts中：

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

在组件中.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

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

1. 第一个与 .xlf 文件中的"VAR_SELECT"相关。它是由 Angular 生成的，构建命令 => "ng-xi18n --i18nFormat=xlf"。如果使用"直接"变量，这个"VAR_SELECT"效果很好(例如，如果我输入"{toto， select， required {required} pattern {pattern}}"并且toto等于"required"(。但是如果使用表中的变量，它似乎不起作用(这是我对变量"formErrors.firstname"的情况(。所以我用我的变量"formErrors.firstname"的名称替换了.xlf文件中的"VAR_SELECT"。

2. 第二个是在"onValueChanged"函数中：

   for (const key in control.errors) {
   this.formErrors[field] += messages[key] + ' ';
   }
   

   由于末尾的空格字符，变量与定义的值之一不匹配(例如，它是"必需的"，而我应该是"必需的"。请注意第一个值末尾的额外空格(