Forms 如何使用角度i18n转换形状错误？

我正在为angular开发i18n，我想为表单错误提供一个翻译。但我不知道怎么做。我跟着导游走。我尝试使用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.'
   }
};

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

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

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

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

在component.html中：

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

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

{formErrors.firstname，select，必选{required}模式{pattern}

在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>

{VAR_SELECT，SELECT，required{required}模式{pattern}
{VAR_SELECT，SELECT，required{Nom usilizateur obligatoire}模式{pattern}
...

---

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

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

第一个与.xlf文件中的“VAR_SELECT”相关。它是由Angular使用build命令=>“ng-xi18n--i18nFormat=xlf”生成的。如果使用了“direct”变量（例如，如果我将“{toto，SELECT，required{required}pattern{pattern}}”和toto等于“required”），那么这个“VAR_SELECT”可以很好地工作。但如果使用表中的变量（这是我使用变量“formErrors.firstname”的情况），它似乎不起作用。因此，我将.xlf文件中的“VAR_SELECT”替换为变量“formErrors.firstname”

第二个是在“onValueChanged”函数中：

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

由于结尾处的空格字符，变量与定义的某个值不匹配（例如，在预期为“必需”的位置，变量为“必需”。请注意第一个值结尾处的额外空格）

---

我是唯一有这种要求的人吗？任何想法都将不胜感激！！：）谢谢