有没有办法在自定义表单验证中传递错误消息?
E.g。我有一个检查用户名的指令。有三种可能的结果:
我有一个像(简化伪html)这样的指令:
<input type="text" namecheck></input><span ng-show="name.$error.namecheck">You had an error {{ error }}</span>
在我的自定义指令中,我可以做到
// check for a conflict and valid name here
ngModel.$setValidity("namecheck",false);
但是如何传递错误消息,指出问题是冲突还是无效的名称?有什么像ngModel.$setValidityErrorMessage()
?
答案 0 :(得分:44)
正如我在评论中写的那样,我只想出来了。我只需要使用不同的有效性标志。没有什么说我必须使用$setValidity()
中的相同密钥作为指令的名称!
<span ng-show="name.$error.nameinvalid">This is not a valid username, it must be alphanmueric</span>
<span ng-show="name.$error.nametaken">Sorry, the username {{ name }} is already taken</span>
并在指令中
// if I got a 409
ngModel.$setValidity("nametaken",false);
// if I got a 400
ngModel.$setValidity("nameinvalid",false);
$error
的名称是错误消息!
答案 1 :(得分:2)
没有。在表单元素上设置有效性只是简单地将适当的类添加到元素,然后可以使用该类来设置元素的样式以指示错误。没有任何错误消息指示元素无效的原因。 Angular不提供这种支持。
您可能已经注意到required
字段上显示为空的错误消息?在chrome中,他们会说:“请填写此字段”或类似内容。这些是浏览器特定的,并且与角度无关。
您必须推出自己的错误消息服务。您可以使用相同的ng-invalid
类来检查表单元素何时无效并基于此显示错误消息,但Angular不提供开箱即用的功能。
角度文档(找到here)中有一个示例,显示了一种可以做到这一点的方法。
<强>更新强>
从Angular 1.3开始,现在支持ngMessage
和ngMessages
指令。这些新指令试图使表单验证和错误消息传递不那么麻烦。这些指令的角度文档是here。查看链接以获取更多详细信息。
答案 2 :(得分:0)
在我看来,您的三条规则包括客户端和服务器验证。我将验证客户端的前两个,以及服务器端的验证最后一个规则。 因为用户名是重复的,所以我们得到它,直到我们将其发布到服务器。 所以,我的做法是:
<div class="col-md-offset-3 col-md-9" ng-show="detailForm.$error && detailForm.name.$invalid && (detailForm.name.$touched || detailForm.$submitted)"
ng-messages="detailForm.name.$error">
<div class="error-message" ng-message="required">the field is required </div>
<div class="error-message" ng-message="maxlength">you are too lang</div>
<div class="error-message" ng-message="pattern">your format is incorrect </div>
</div>
<div class="col-md-offset-3 col-md-9" ng-show="serverError && serverError.name">
<div class="error-message">{{serverError.name}}</div>
</div>