Validation 自定义必需的错误消息

我的输入元素中有

required

，我想在那里设置自定义错误消息

这项工作：

oninvalid=“this.setCustomValidity（'custom error'）”

但我想从

json

文件中的参考资料中读取该错误消息。我使用的是

i18n

，如果我愿意的话，它可以正常工作：

{{'General.EmptySearch'| translate}}

它显示我的错误消息

因此，如果我这样做：

oninvalid=“this.setCustomValidity（{{{'General.EmptySearch'| translate}}'）”

上面说

出于安全原因，不允许绑定到事件属性“oninvalid”，请使用（无效）=。。。 如果“oninvalid”是指令输入，请确保该指令由当前模块导入

好的，我换一下。我正在这样做：

（无效）=“this.setCustomValidity（{{{'General.EmptySearch'| translate}}'）”

错误是：

获取插值（{}），其中表达式应位于[this.setCustomValidity（'{{'General.EmptySearch'|translate}'）中的第24列

怎么了

这是我的表格：

int

.ts

文件

searchval: FormGroup;
ngOnInit() {
        this.searchval = new FormGroup({
            Search: new FormControl('')
        });
}

和html

<form (ngSubmit)="onSubmit(searchval)" [formGroup]="searchval">
                    <input type="text" class="form-control" required formControlName="Search" placeholder="{{ 'General.Search' | translate }}">
                    <button type="submit"></button>
</form>

---

好的，因此您使用的是模型驱动的表单语法

看看这本书。它展示了如何以正确的方式进行表单验证。它还显示了如何在代码中包含验证消息（模板中的vs），这就是您的问题所在。一旦验证消息出现在代码中，翻译它们就不会有问题

---

旁注：我真的很好奇为什么要在观看

（无效）

DOM事件时验证字段。我从未见过这样做。

好的，所以您使用的是模型驱动的表单语法

看看这本书。它展示了如何以正确的方式进行表单验证。它还显示了如何在代码中包含验证消息（模板中的vs），这就是您的问题所在。一旦验证消息出现在代码中，翻译它们就不会有问题

---

旁注：我真的很好奇为什么要在观看

（无效）

DOM事件时验证字段。我从未见过这样做。

很有趣。在阅读你的问题之前，我不知道有一个问题。因此，您正在监视“无效”事件，并在该事件发生时设置了错误消息，对吗？如果是这样的话，我从来没有见过用Angular做这种事情。错误通常通过观察字段的

Errors

属性来显示。@AngularFrance是的，我正在尝试这样做。你能告诉我另一种方法吗？我不想向用户显示默认错误消息。并且您正在使用模板驱动的表单，对吗？（不是模型驱动的表单）@AngularFrance我已经更新了我的问题OK，我已经发布了答案。很有趣。在阅读你的问题之前，我不知道有一个问题。因此，您正在监视“无效”事件，并在该事件发生时设置了错误消息，对吗？如果是这样的话，我从来没有见过用Angular做这种事情。错误通常通过观察字段的

Errors

属性来显示。@AngularFrance是的，我正在尝试这样做。你能告诉我另一种方法吗？我不想向用户显示默认错误消息。并且您正在使用模板驱动的表单，对吗？（不是模型驱动的表单）@AngularFrance我已经更新了我的问题OK，我已经发布了答案。