Hi everyone in this blog I’m explaining about AngularJs forms.


AngularJs enriches form filling and validation, We can use ng-click to handle AngularJs click on button and use $dirty and $invalid flags to do the validations in seemless way. Use novalidate with a form declaration to disable any browser specific validation. Forms controls makes heavy use of angularjs events. Let’s have a quick look on event first.


AngularJS provides multiple events which can be associated with the HTML controls. For example ng-click is normally associated with button. Following are supported events in Angular JS.

1.       ng-click

2.       ng-dbl-click

3.       ng-mousedown

4.       ng-mouseup

5.       ng-mouseenter

6.       ng-mouseleave

7.       ng-mousemove

8.       ng-mouseover

9.       ng-keydown

10.   ng-keyup

11.   ng-keypress

12.   ng-change


Reset data of a form using on-click directive of a button.

<input name="firstname" type="text" ng-model="firstName" required>
<input name="lastname" type="text" ng-model="lastName" required>
<input name="email" type="email" ng-model="email" required>
<button ng-click="reset()">Reset</button>
    function studentController($scope) {
        $scope.reset = function () {
            $scope.firstName = "Kamlakar";
            $scope.lastName = "Singh";
            $scope.email = "sample@sample.com";
Validate data:

Following can be used to track error.

1.       $dirty - states that value has been changed.

2.       $invalid- states that value entered is invalid.

3.       $error- states the exact error.


<title>Angular JS Forms</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
table tr:nth-child(odd) {
  background-color: #f2f2f2;
table tr:nth-child(even) {
  background-color: #ffffff;
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
<form name="studentForm" novalidate>
<table border="0">
<tr><td>Enter first name:</td><td><input name="firstname" type="text" ng-model="firstName" required>
   <span style="color:red" ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid">
      <span ng-show="studentForm.firstname.$error.required">First Name is required.</span>
<tr><td>Enter last name: </td><td><input name="lastname"  type="text" ng-model="lastName" required>
   <span style="color:red" ng-show="studentForm.lastname.$dirty && studentForm.lastname.$invalid">
      <span ng-show="studentForm.lastname.$error.required">Last Name is required.</span>
<tr><td>Email: </td><td><input name="email" type="email" ng-model="email" length="100" required>
<span style="color:red" ng-show="studentForm.email.$dirty && studentForm.email.$invalid">
      <span ng-show="studentForm.email.$error.required">Email is required.</span>
                  <span ng-show="studentForm.email.$error.email">Invalid email address.</span>
<tr><td><button ng-click="reset()">Reset</button></td><td><button
                ng-disabled="studentForm.firstname.$dirty && studentForm.firstname.$invalid ||
                                                  studentForm.lastname.$dirty && studentForm.lastname.$invalid ||
                                                  studentForm.email.$dirty && studentForm.email.$invalid"
    var mainApp = angular.module("mainApp", []);
    mainApp.controller('studentController', function ($scope) {
        $scope.reset = function () {
            $scope.firstName = "Kamlakar";
            $scope.lastName = "Singh";
            $scope.email = "sample@sample.com";



When we have empty every field that time our form give some message like this

  Modified On Feb-17-2018 12:53:03 AM

Leave Comment