How To Do Form Validation Using AngularJS

2 min read

I started using AngularJS extensively on my projects and recently started using it on our Apache Cordova projects well. Let me tell how to do Form Validations in AngularJS.
If you are in hurry but want to quickly try this entire blog code sample quickly, then you can clone the sample app at https://github.com/spritlesoftware/form-validation-angularjs-example
As a first step, create a new Apache Cordova project and include relevant Angular JS files.
[source]





[/source]
Lets try to validate the below validation rules for the Signup form
new-sign-up

  • Email is required
  • Email should be valid
  • Password is required
  • Password must contain 8 – 20 characters with atleast one uppercase character and a number
  • Password and password confirmation fields must match
  • If sign up fails then password fields should be cleared
  • Mobile is optional
  • Mobile number should be of 10 – 11 digits only
  • Mobile number should be consist of numbers only
  • Terms and conditions should be checked

Now let’s see how we can write validations for the about requirements using AngularJS.
AngularJS sets certain properties for the form and the fields in it. They are:

$validng-validBoolean Tells whether an item is currently valid based on the rules you placed.
$invalidng-invalidBoolean Tells whether an item is currently invalid based on the rules you placed.
$pristineng-pristineBoolean True if the form/input has not been used yet.
$dirtyng-dirtyBoolean True if the form/input has been used.

Here is how the form
[source]

[/source]
Points to note:
I have used the novalidate attribute for the form to prevent the default HTML5 validations since we’ll be handling the validations via our own code.
AngularJS provides many directives for enforcing validation rules that we can use for form input fields (source: https://docs.angularjs.org/api/ng/input/input%5Bemail%5D).
The below code snippet shows some of the attributes for the same.
[source]

[/source]
Now that we coded for sign-up form, let’s move on to the controller part of it..
[source]
myApp.controller(‘SignupCtrl’, function($scope, ngDialog) {
$scope.user = {};
$scope.user.isTermsChecked = false;
$scope.submitSignupForm = function(isValid) {
$scope.doesNotMatch = false;
//The below scope doesNotMatch handle password and password retype mismatch functionality
if ($scope.user.password !== $scope.user.confirm_password && ($scope.user.confirm_password !== “” || $scope.user.confirm_password === “”))
$scope.doesNotMatch = true;
if (isValid) {
//handle successful form submission
alert(‘It’s a valid form values, we can proceed’);
} else {
//handle invalid form submission
ngDialog.open({ template: ‘authErrorTemplate’, scope: $scope });
if ($scope.doesNotMatch) {
$scope.user.password = “”;
$scope.user.confirm_password = “”;
}
}
};
});
[/source]
As we know, when the form is submitted with errors we need to show the error messages to the user. Lets use ng-dialog to show error messages. To use it, include ngDialog.js and ngDialog.css files in your project posts which you can start using ngDialog provider in your directives, controllers and services.
[source]

[/source]
new-signup-error
As I mentioned before AngularJS sets the $error property to the various form fields and we are simply making use of that to hide / show the errors messages using the ng-show directive.
You can access this property and find out the status of each and every validation rule using the following pattern:
[source]

.

..$error.
[/source]
We hope this blog explains how to do form validations and please leave your comments if you have any questions.

Related posts:

Leave a Reply

Your email address will not be published. Required fields are marked *