自定义所需的错误消息

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

这个工程： oninvalid="this.setCustomValidity('custom error')"

不过我想读从资源的错误消息，这是在json文件。我正在使用i18n和ng2-translate，如果我愿意，它可以正常工作： <span>{{'General.EmptySearch' | translate }}</span>它显示我的错误消息。

所以如果我要做到这一点：

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

它说

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

好的我会改变它的。我做的是：

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

错误是：

得到插值（{{}}）其中预计在列24表达[this.setCustomValidity（“{{大会.EmptySearch'| translate}}'）]

怎么了？

这里是我的形式：

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>

来源

2017-01-24 gsiradze

有趣。在阅读你的问题之前，我不知道有一个['无效的DOM事件]（https://developer.mozilla.org/en-US/docs/Web/Events/invalid）。因此，您正在观看“无效”事件，并在发生此事件时设置错误消息，对吗？如果是这样，我从来没有见过与Angular那样做的事情。通常通过观看字段的“错误”属性来显示错误。 – AngularChef

@AngularFrance是的，我试图做到这一点。你能告诉我另一种方式吗？我不想向用户显示默认错误消息。 – gsiradze

而你正在使用模板驱动的表单，正确吗？（NOT model-driven forms） – AngularChef

好了，你使用的是模型驱动形式的语法。

查看official doc on form validation。它显示了如何以正确的方式进行表单验证。它还显示了如何在你的代码中有验证信息（vs在你的模板中），这就是你的问题所在。一旦你的验证信息在你的代码中，你就没有问题了。

附注：我很好奇为什么你想验证你的领域，看着(invalid) DOM事件。我从来没有见过这样做。

来源

2017-01-24 11:06:12 AngularChef

自定义所需的错误消息

回答

相关问题