Introduction

In this tutorial we’re going to be using the AngularJS library to create a self validating email input in html. We’re using AngularJS to extend the capabilities of our HTML, but don’t want to get involved with the pesky DOM.

Prepping Our View

Before we get into AngularJS, we need to create our html view. Write something similar to the following to get started:

As you can see the only element that is visible in the browser is our email input. Now that we have our view, we can dive into the AngularJS functionality, and validate our input.

Prepping The View

First we need to specify that this is an AngularJS application. To do so, we need to add “ng-app” to the opening html tag, add a controller to the form, and then reference our script in the head tag.

Adding The Validation

Now we can start validating our e-mail input. First, let’s add a model to our input markup:

We’re going to have to define the scope of our input, so let’s create a script tag and write a function that helps us do that.

Now that we have the scope defined we can create our validations and produce error messages for invalid data:

When we test our code in the browser, we can see that the input form is now validating asynchronously on the fly. For more help and resources on AngularJS visit angularjs.org