In this article, we will discuss how to implement AngularJs form validation step by step
Introduction About AngularJs forms
AngularJS Applications are facilitated to create a form that enriches data binding and validation of input controls. see link how to setup angularJs application
The application form is a collection of controls for the purpose of grouping related controls together. follow some of the input controls are used in AngularJS forms:
- input elements tag
- button elements tag
- select elements tag
- textarea elements tag
Data Binding In angulaJS
In angularjs the give events are associated with the different HTML input elements.
- ng-click
- ng-dbl-click
- ng-mousedown
- ng-mouseup
- ng-keydown
- ng-keyup
- ng-mouseenter
- ng-mouseleave
- ng-keypress
ng-model directive: it is used to provides the data binding in Angularjs, let us the given below example how to bind the input controller to your Application
input filed:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
First Name: <input type="text" ng-model="firstname">
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function ($scope) {
$scope.firstname = "Tutorials Helper";
});
</script>
</body>
</html>
Radio Buttons:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="">
<form>
Choose a Course:
<input type="radio" ng-model="myVara" value="d1" />Turorails Helper
<input type="radio" ng-model="myVara" value="d2" />MVC
<input type="radio" ng-model="myVara" value="d3" />Java
</form>
<div ng-switch="myVara">
<div ng-switch-when="d1">
<h3>Tutorials Helper</h3>
<p>Welcome to the best atricesl blog</p>
</div>
<div ng-switch-when="d2">
<h3>MVC</h3>
<p>Asp.net Mvc Framework </p>
</div>
<div ng-switch-when="d3">
<h3>Java</h3>
<p>Basic core java.</p>
</div>
</div>
<p>
this example "ng-switch" directive hides and shows HTML parst it is depending on the
value of the radio buttons.
</p>
</body>
</html>
Example: this example “ng-switch” directive hides and shows HTML parst it is depending on the value of the radio buttons.
Tutorials Helper
Welcome to the best atricesl blog
MVC
Asp.net Mvc Framework
Java
Basic core java.
Checkbox: The ng-show attribute is set to true whenever the checkbox is checked.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<form>
show : <input type="checkbox" ng-model="myVara" />
</form>
<h3 ng-show="myVara">Checked</h3>
</div>
<p>The ng-show attribute is set to true whenever the checkbox is checked.</p>
</body>
</html>
Checked
The ng-show attribute is set to true whenever the checkbox is checked.
Angularjs form validation
AngularJS Applications provide us client-side form validations. AngularJS will check the state of the Application form and input fields (input fields, Textarea fields, select). and user current state also.
AngularJS also holds the information about the form of whether the input fields have been touched, or modified, or not.
the given directives are generally we will use to track errors in an AngularJS form:
- $dirty – states that value has been changed.
- $invalid – states that the value entered is invalid.
- $error – states the exact error.
See the given below AngularJS Sample form
<!DOCTYPE html>
<html>
<head>
<title>Angularjs form validation</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;
}
</style>
</head>
<body>
<h3> AngularJS Sample form Application </h3>
<div ng-app="mainApp" ng-controller="studentController">
<form name="studentForm" novalidate>
<table border="0">
<tr>
<td>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>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 = "Tutorials ";
$scope.lastName = "helper";
$scope.email = "[email protected]";
};
$scope.reset();
});
</script>
</body>
</html>
Related resource :
I like to share my work experience, research, and knowledge through my blog.
I love developing the applications in Microsoft technologies including asp.net mvc,c#.net, windfarms, SQL server,entityfrawork,Ajax,Jquery,WEbApi,Asp.net core, SEO, WordPress, UI..more
- how to create ASP.NET Core 3 Web API Project - January 21, 2022
- JWT Authentication using OAUTH - January 10, 2022
- Ado.net database Transactions - January 9, 2022
Excellent Tutorial website
thanks, Ankit Kumar