Events in AngularJS

There are AngularJS directives that help our application to handle DOM events like mouse clicks, change events, key presses and many other. To demonstrate this, we have created a sample form, with three input fields and two buttons, submit and reset. The form smartly deals with all the basic validations for required fields and an email field.

Note that, the submit button gets enabled only when all the basic field validations are met.

Let’s first create the HTML,

studentForm.lastname.$dirty in the above code returns a boolean value, implying that the user has interacted with the data in any way. This means that if we do change the existing value in the last name field, the studentForm.lastname.$dirty returns true.


studentForm.lastname.$invalid in the above code returns a boolean value, implying that the field data is invalid. If the ‘required’ attribute is specified for any field in HTML (as above), it must validate the field something like – if the field goes empty, the studentForm.lastname.$invalid returns true.

Then comes the custom javascript file, which should look as:

Make sure you include this JS file into your HTML file in a <script> tag.

Let’s have a small CSS written as below:

Running the HTML file will display the following on the browser:

Events in AngularJS

Start fiddling with this example now

Receive our updates to your inbox

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.