获取不同语言的 Angular 错误答案

【问题标题】：Get Angular errors in a different language获取不同语言的 Angular 错误
【发布时间】：2019-12-03 14:45:11
【问题描述】：

如果我验证这样的 Angular Reactive 表单

this.formGroup = this._formBuilder.group({
  formControl: new FormControl(null, [Validators.required])
});

所以需要输入。

然后，如果我尝试在输入空白的情况下提交，我会收到如下错误：

const { errors } = this.formGroup.get('formControl');
console.log(errors);

我收到以下输出

{required: true}

我的问题

我可以用另一种语言得到这个错误吗？

例如，我可以将其设置为法语并输出吗？

{obligatoires: vrai}

为什么

我正在尝试一种从验证错误中自动生成错误消息的方法。

我正在这个 StackBlitz 中涂鸦，想知道我是否可以让它工作

https://stackblitz.com/edit/angular-validation-errors

【问题讨论】：

我认为你不能这样做，但你可以创建自定义验证器。

标签： angular angular-material angular8 angular-material-8

【解决方案1】：

前段时间遇到过同样的问题。我们开发了一个库来解决这个问题。

https://github.com/RiskChallenger/translation-validation

【讨论】：

【解决方案2】：

您可以按照评论中的建议编写自定义验证器。您甚至可以查看 source code for validators 并根据需要对其进行修改。这是自定义的required 验证器：

function isEmptyInputValue(value: any): boolean {
  return value == null || value.length === 0;
}

class ValidatorHelper {
 static required(control: AbstractControl): ValidationErrors | null {
    return isEmptyInputValue(control.value) ? { 'obligatoires' : 'vrai' } : null;
  }
}

然后在你的表单中使用它：

selectFormControl: new FormControl(null, [ValidatorHelper.required])

演示：StackBlitz

PS。这里我们现在假设你只有一种语言，如果你有多种，这不是最好的解决方案。

【讨论】：

是的，我想如果我可以翻译这些字符串。也许需要更多地研究 i18n 角度。我更喜欢使用 angular i18n 而不是 ngx translate 或任何其他第三方包
当然。只是想把这个选项扔出去。源代码可用，内置验证器并不多，因此这是一个复制粘贴场景，只需更改几行。如前所述，只是想把这个选项扔出去，如果它不适合你，也许未来有人正在考虑同样的问题:) 但至少你有选择！但据我所知，不可能像那样改变语言。我可能是错的，很高兴看到是否有人可以证明我错了！ :D
这个答案暗示了一个非常糟糕的设计。尽可能地，您的程序中应该只有一种语言，直到您将信息呈现给用户的最后——此时您可以翻译内容。在我们的项目中，我们基本上从 control.errors 中提取所有键，然后用 | 翻译这些键。 translateError 管道。

【解决方案3】：

你不能。

实现这一点的正确方法是保留 Angular 输出并在 UI 中使用 ngx-translate 将其翻译：

你得到了这样的东西：

<div>{{ 'required' | translate }}</div>

【讨论】：

【解决方案4】：

您可以创建一个自定义组件，例如<custom-error> 而不是<mat-error>，您可以在其中使用ng2-translate 或ngx-translate 来翻译错误消息。这就是我们在应用程序中所做的。

【讨论】：

我们试图做同样的事情，但显然 Material 的 mat-error 只有在与出现在 DOM 中的同一级别时才能正常工作。否则它会失去其样式和对输入字段的附加，您必须自己重建样式......