AngularJS Username Already In Use Example Directive

So this is how you can use ajax validation with an AngularJS directive to check if a username is already in use (by another registered user).

  1. User types a username
  2. Ajax request to back-end with username
  3. back-end checks if username already exists
  4. front end displays outcome

ajax validation with angularJS to check if a username is already in use

What is going on:

  • There is an ng directive to check for unique values
  • There is an ng service to perform the ajax checks to the back-end
  • There is a back-end api function which checks the db

That’s pretty much it.

ng-unique-directive.js

auth-service.js

ng template (view)

Example back-end (Laravel PHP)

routes:

controller:

As you can see from the console result the check is working like we want.

Further reading:
http://codepen.io/sevilayha/pen/xFcdI
http://weblogs.asp.net/dwahlin/building-a-custom-angularjs-unique-value-directive

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and love to share what he learns.

One thought on “AngularJS Username Already In Use Example Directive

Leave a Reply

Your email address will not be published. Required fields are marked *