AngularJS Forms

AngularJS enriches form filling and validation. We can use the ngclick event to handle click buttons, and use the $dirty and $invalid flags for seamless validation. The novalidate attribute with form declaration can disable any browser-specific validation. Form controls extensively use AngularJS events. Let's take a look at these events first.

events

AngularJS provides multiple events associated with HTML controls. For example, ng-The click command is usually associated with buttons. AngularJS supports the following events-

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

Use ng-click directive to reset form data.

<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

The following content can be used to track errors.

$dirty −Indicate the value has changed.
$invalid −Indicate the input value is invalid.
$error −Specify the exact error.

Online Example

The following example will demonstrate all the above directives.

testAngularJS.htm

Example

<html>
　　　<head>
　　　　　　<title>Angular JS Forms</title>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/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-Form Example</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>
　　　　　　　　　　　　　　　　　　　　　</span>
　　　　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　<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>
　　　　　　　　　　　　　　　　　　　　　</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 = "Sea";
　　　　　　　　　　　　　　　$scope.lastName = "Gull";
　　　　　　　　　　　　　　　$scope.email = "[email protected]";
　　　　　　　　　　　　}
　　　　　　　　　　　　
　　　　　　　　　　　　$scope.reset();
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

Test and See‹/›

Output Results

Open the file in a web browsertestAngularJS.htmand check the results.