Question

我的输入元素中有required，我想在那里设置自定义错误消息。

这有效： oninvalid="this.setCustomValidity('custom error')"

但我想从json文件中的资源中读取该错误消息。我正在使用i18n和ng2-translate，如果我这样做的话可以正常工作： <span>{{'General.EmptySearch' | translate }}</span>它会显示我的错误消息。

所以如果我这样做：

oninvalid="this.setCustomValidity('{{'General.EmptySearch' | translate }}')"

它说

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

好的，我会改变它。我这样做：

(invalid)="this.setCustomValidity('{{'General.EmptySearch' | translate }}')"

错误是：

插值（{{}}）其中表达式位于[this.setCustomValidity（＆＃39; {{＆＃39; General.EmptySearch＆＃39; | translate}}＆＃39;）中的第24列

出了什么问题？

这是我的表格：

int .ts file

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>

Answer 1

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

查看official doc on form validation。它显示了如何以正确的方式进行表单验证。它还显示了如何在代码中使用验证消息（在模板中为vs），这就是您的问题所在。一旦您的验证消息出现在您的代码中，您就可以毫无问题地进行翻译。

旁注：我真的很好奇你为什么要在(invalid) DOM事件中验证你的字段。我从来没有见过这样做过。

自定义所需错误消息

1 个答案: