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 passionate web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and reading.

One thought on “AngularJS Username Already In Use Example Directive

Leave a Reply

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