AngularJs Forms

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 a button and use $dirty and $invalid flags to do the validations in a seemless way. Use novalidate with a form declaration to disable any browser-specific validation. Forms controls make heavy use of angularjs events. Let’s have a quick look on the event first.


AngularJS provides multiple events which can be associated with the HTML controls. For example, ng-click is normally associated with the 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';
            $ = '';
Validate data:

The 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=''></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='$dirty &&$invalid'>
      <span ng-show='$error.required'>Email is required.</span>
      <span ng-show='$'>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 ||
                                        $dirty &&$invalid'
    var mainApp = angular.module('mainApp', []);
    mainApp.controller('studentController', function ($scope) {
        $scope.reset = function () {
            $scope.firstName = 'Kamlakar';
            $scope.lastName = 'Singh';
            $ = '';



AngularJs Forms

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

AngularJs Forms

Last updated:2/22/2018 1:23:13 AM
Anonymous User

Anonymous User

I am a content writter !


Leave Comment