AngularJS自定义表单验证错误消息

Is there any way to pass an error message in custom form validation?

有没有办法在自定义表单验证中传递错误消息？

E.g. I have a directive that checks a username. There are three possible outcomes:

例如。我有一个检查用户名的指令。有三种可能的结果：

It is valid
这是有效的
It is invalid because it isn't a good username ("this.is-invalid")
它无效，因为它不是一个好的用户名（“this.is-invalid”）
It is invalid because it is already in use
它无效，因为它已被使用

I have a directive like (simplified pseudo-html):

我有一个像（简化伪html）的指令：

<input type="text" namecheck></input><span ng-show="name.$error.namecheck">You had an error {{ error }}</span>

And in my custom directive, I can do

在我的自定义指令中，我可以做到

// check for a conflict and valid name here
ngModel.$setValidity("namecheck",false);

But how do I pass an error message that indicates if the problem was a conflict or invalid name? Is there anything like ngModel.$setValidityErrorMessage() ?

但是，如何传递错误消息，指出问题是冲突还是无效的名称？有什么像ngModel。$ setValidityErrorMessage（）？

3 个解决方案

#1

As I wrote in the comments, I just figured it out. I just need to use different validity flags. Nothing says that I have to use the same key in $setValidity() as the name of the directive!

正如我在评论中写的那样，我只想出来了。我只需要使用不同的有效性标志。没有什么说我必须在$ 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>

And in the directive

并在指令中

// if I got a 409
ngModel.$setValidity("nametaken",false);
// if I got a 400
ngModel.$setValidity("nameinvalid",false);

The name of the $error is the error message!

$ error的名称是错误消息！

#2

No. Setting the validity on a form element just simply adds the appropriate class to the element, which can then be used to style the element to indicate an error. There aren't any error messages that indicate why the element is invalid. Angular doesn't provide that support.

在表单元素上设置有效性只是简单地向元素添加适当的类，然后可以使用该类来设置元素的样式以指示错误。没有任何错误消息指示元素无效的原因。 Angular不提供这种支持。

You may have noticed error messages that pop up on required fields that are empty? In chrome they say something like: "Please fill out this field" or something. Those are browser-specific and aren't related to angular in any way.

您可能已经注意到在必填字段为空时弹出的错误消息？在chrome中，他们会说：“请填写此字段”或其他内容。这些是特定于浏览器的，并且与角度无关。

You'd have to roll your own error messaging service. You can use the same ng-invalid classes to check when a form element is invalid and show the error messages based on that, but Angular doesn't provide that out of the box.

您必须推出自己的错误消息服务。您可以使用相同的ng-invalid类来检查表单元素何时无效，并根据该元素显示错误消息，但Angular不提供开箱即用的功能。

There is an example in the angular docs (found here) that shows one way you can do that.

角度文档（在此处找到）中有一个示例，显示了一种可以执行此操作的方法。

UPDATE:

更新：

As of Angular 1.3, there is now support for the ngMessage and ngMessages directives. These new directives attempt to make form validation and error messaging less of a hassle. The angular docs for these directives are here. Check the link out for more details.

从Angular 1.3开始，现在支持ngMessage和ngMessages指令。这些新指令试图使表单验证和错误消息传递不那么麻烦。这些指令的角度文档在这里。查看链接以获取更多详细信息。

#3

In my opinion, your three rules include both client and server validation. I'll validate the first two in client side, and the validate last rule in server side. Because an username is duplicate or not, we get it until we post it to the server. So, my practice is following:

在我看来，您的三个规则包括客户端和服务器验证。我将验证客户端的前两个，以及服务器端的验证最后一个规则。因为用户名是重复的，所以我们得到它，直到我们将其发布到服务器。所以，我的做法是：

 <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>

#1