Saturday, 10 May 2014

Angular Validation with ngMessage

Here is a screenshot of a business form I have written in Angular:

angularvalidation

For the live demo click here

For the source code click here

The validation is coded using the new ngMessage directive which displays the error messages should any be present.  Various rules are shown as an example: required, min/max length, regex and a faked database lookup.

ngMessages has only been introduced since AngularJS 1.3.0-beta.8

This example was originally based on a blog post by Year of Moo with a few of my own enhancements to match the behaviour of a previous form I had created.

I’ve customised the CSS to show the user what fields are required, along with what fields have been updated and are valid.  Each control only updates when the user leaves the control rather than on every keypress which is the default Angular behaviour. 

I also use ngCloak to ensure no output is displayed before Angular has compiled the page.

3 comments:

  1. How could we do a position absolute tooltip (right)?

    ReplyDelete
    Replies
    1. I have opened this issue: http://stackoverflow.com/questions/29892169/is-it-possible-to-show-errors-inside-a-tooltip-with-ng-messages

      Delete