AngularJS custom form validation error message

Question

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:

1. It is valid
2. It is invalid because it isn't a good username ("this.is-invalid")
3. It is invalid because it is already in use

I have a directive like (simplified pseudo-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() ?

Answer 1

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.

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.

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.

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.

Answer 2

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!

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