Scribd
Upload
65 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
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
65 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
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