Angular.js ngMessages Show message when valid

Question

From here > Angular ngMessages change class when valid and not only on error

I've tried this

<div ng-messages="userForm.name">
    <i ng-message="$error.required" class="fa fa-exclamation-circle"></i>
    <i ng-message="$valid" class="fa fa-exclamation-check"></i>
</div>

this

<div ng-messages="userForm.name.$error">
    <i ng-message="required" class="fa fa-exclamation-circle"></i>
    <i ng-message="$valid" class="fa fa-exclamation-check"></i>
</div>

and this

<div ng-messages="userForm.name.$error">
    <i ng-message="$error" class="fa fa-exclamation-circle"></i>
    <i ng-message="userForm.name.$valid" class="fa fa-exclamation-check"></i>
</div>

And a few more that I won't bother to list. None of them worked. Can I get a working example please

Vamsi · Accepted Answer · 2015-07-22 02:35:48Z

2

ngMessages is checking list of particular type, for example if $error exists then it is checking for list of types of errors, like required, min-length, max-length etc.

In your case you are trying to use, $valid inside $error. It cannot happen because if it is valid, then it will not have an error.

I think you can simply use ng-show attribute to display messages like this

<div ng-show='myForm.myName.$error.required'>required</div>
<div ng-show='myForm.myName.$valid'>valid</div>

or In your case

<i ng-show='myForm.myName.$error.required' class='fa fa-exclamation-circle'></i>
<i ng-show='myForm.myName.$valid' class='fa fa-exclamation-check'></i>

see this example http://plnkr.co/edit/z1Lrz17z9qnViq9HAahg?p=preview

answered Jul 22, 2015 at 2:35

Vamsi

9,8006 gold badges40 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kai Over a year ago

This is definitely what I want, gonna try it now

Kai Over a year ago

...and it works, and with less syntax fluff than ngMessages

Collectives™ on Stack Overflow

Angular.js ngMessages Show message when valid

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related