React JS Training Course Online
- 21k Enrolled Learners
- Weekend
- Live Class
(7200)
Validation is a method to authenticate the user. It is used in all the Web Technologies like HTML and JavaScript. But today our focus will be on Validation in Angular JS in the following order:
What is Form validation?
Form validation is a technique by which we can validate the HTML form. Let’s take a simple example to suppose a user has an HTML form and that HTML form has different fields, these field is validated by form validator when we want to validate the form we just need to check the value of the particular field with the validator expression. For more check out this full stack development course now.
If regular expression and the field value are the same then we can say our form is validated. In the HTML form, there are different types of validations like email, required, min, max, password, etc.
Form Validation in Angular JS
Let’s talk about how we can validate a form in angular JS. Angular JS provides various type of form validation properties that we can use to validate the form or get the data from the form.
$valid: This property tells whether the field is valid or not by applying the appropriate rule on that.
$invalid: As the name says invalid this tiles weather the field is invalid or not based on appropriate rule on that.
$pristine: It will return true in the form input field is not used.
$dirty: It will return true in the form input field is used.
$touched: BooleanTrue if the input has been blurred.
To access the form: <form name>.<angular property>
To access an input: <form name>.<input name>.<angular property>
Now let’s explain the form validation in angular JS with an example so firstly we make two files, one is app.js and another is index.html. Our index.htm file contains a simple HTML form that has the angular validation and our app.js file contains the backend code to handle the form validation on the index.html page.
The index.html page contents form with novalidate property and what that means exactly?
The novalidate property in the form tag tells the HTML that we can use our custom form validation. If we don’t give the novalidate property then and the HTML form validates by using HTML5 default form validation properties.
Take your design skills to the next level with our UI UX Design Course Online.
Steps in Form Validation
In our form, we created 6 fields in our form these are first name, last name, email, phone, password, and message.
First, we add the required field validator, this validator tells the users that a specific field is required.
Next is the email field if a user doesn’t give any valid email then our email validator throws an email validation error.
We set the minimum and the maximum length in our password validation the minimum length is 5 and the maximum length is 8 so the user can give a valid password between 5 to 8 characters.
Finally, we set the phone and the message fields required and specifically, apply number validation on phone filed.
Code for Form Validation in Angular JS
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular scope example</title>
</head>
<body ng-app="ngValidApp">
<div ng-controller="ngValidController">
<form name="chkValidation" novalidate>
<label>First Name</label>
<input type="text" placeholder="Enter first name" name="firstName" ng-model="firstName" ng-required="true"><br>
<p style = "color:red" ng-show = "chkValidation.firstName.$error.required">This filed is required</p>
<label>Last Name</label>
<input type="text" placeholder="Enter last name" name="lastName" ng-model="lastName" ng-required="true"><br>
<p style = "color:red" ng-show = "chkValidation.lastName.$error.required">This filed is required</p>
<label>Email</label>
<input type="email" placeholder="Enter email" name="email" ng-model="email" ng-required="true"><br>
<p style = "color:red" ng-show = "chkValidation.email.$error.required">This filed is required</p>
<p style = "color:red" ng-show = "chkValidation.email.$error.email">Not a valid email</p>
<label>Phone</label>
<input type="text" required placeholder="Enter phone" name="phone" ng-model="phone" ng-required="true" ng-pattern="/^(+d{1,2}s)?(?d{3})?[s.-]?d{3}[s.-]?d{4}$/"><br>
<p style = "color:red" ng-show = "chkValidation.phone.$error.required">This filed is required</p>
<p style = "color:red" ng-show="chkValidation.phone.$error.pattern">This is not a valid phone</p>
<label>Password</label>
<input placeholder="******" type="password" name="password" ng-model="password" ng-required="true" ng-minlength="5" ng-maxlength="8"><br>
<p style = "color:red" ng-show = "chkValidation.password.$error.required">This filed is required</p>
<p style = "color:red" ng-show = "(!chkValidation.password.$valid)">Password between 5 to 8 characters</p>
<label>Message</label>
<textarea required placeholder="Enter your message" name="message" ng-model="message" ng-required="true"></textarea><br>
<p style = "color:red" ng-show = "chkValidation.message.$error.required">This filed is required</p>
<button type="submit">Submit</button>
</form>
</div>
<!--angular js library-->
<script src="assets/js/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
var app = angular.module('ngValidApp', []);
app.controller('ngValidController', function($scope) {
});
Let’s talk about some validation directive used in the form:
- ng-required: For providing the required field
- ng-show: To show the error message based on the condition(check the validation properties)
- ng-minlength: For providing minimum length
- ng-maxlength: For providing the maximum length
- ng-pattern: To match a specific pattern
- ng-model: Binds the field with validation properties like $error, $valid, etc.
With this, we come to an end of this Validation in Angular JS article. I hope you got an understanding of the various things to be considered for form Validation in Angular JS.
If you wish to learn more about Angular framework, then check out our Angular Course which comes with instructor-led live training and real-life project experience. This training will help you understand Angular in-depth and help you achieve mastery over the subject.
Join a Flutter Certification and learn how to create mobile apps that are performant, scalable, and easy to maintain.
Got a question for us? Please mention it in the comments section of this article and We will get back to you.
