Scribd
Upload
67 views

Events: Angularjs Forms

AngularJS provides events and validation tools to enrich form filling. It uses ng-click to handle button clicks and flags like $dirty and $invalid to validate form fields. Novalidate disables browser validation. Events like ng-click, ng-change are used with form controls. Form validation can track errors through $dirty, $invalid, and $error flags. An example shows resetting a form and validating fields for required values and email format.

Uploaded by

Kunika Kittu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
67 views

Events: Angularjs Forms

AngularJS provides events and validation tools to enrich form filling. It uses ng-click to handle button clicks and flags like $dirty and $invalid to validate form fields. Novalidate disables browser validation. Events like ng-click, ng-change are used with form controls. Form validation can track errors through $dirty, $invalid, and $error flags. An example shows resetting a form and validating fields for required values and email format.

Uploaded by

Kunika Kittu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

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 Angular events. Let's have a quick look on events first.
Events
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.

ng-click

ng-dbl-click

ng-mousedown

ng-mouseup

ng-mouseenter

ng-mouseleave

ng-mousemove

ng-mouseover

ng-keydown

ng-keyup

ng-keypress

ng-change

ng-click
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>
<script>
function studentController($scope) {
$scope.reset = function(){
$scope.firstName = "Mahesh";
$scope.lastName = "Parashar";

$scope.email = "[email protected]";
}
$scope.reset();
}
</script>
Validate data
Following can be used to track error.

$dirty - states that value has been changed.

$invalid- states that value entered is invalid.

$error- states the exact error.

Example
Following example will showcase all the above mentioned directives.
testAngularJS.htm
<html>
<head>
<title>Angular JS Forms</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script
>
<style>
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;
}
</style>
</head>
<body>
<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" ngmodel="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>
</span>
</td></tr>
<tr><td>Enter last name: </td><td><input name="lastname" type="text" ngmodel="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>
</span>
</td></tr>
<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>
</span>
</td></tr>
<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"
ng-click="submit()">Submit</button></td></tr>
</table>
</form>
</div>
<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController', function($scope) {
$scope.reset = function(){
$scope.firstName = "Mahesh";
$scope.lastName = "Parashar";
$scope.email = "[email protected]";
}
$scope.reset();
});
</script>
</body>
</html>
Output
Open textAngularJS.htm in a web browser. See the result.

You might also like