How To Do Form Validation Using AngularJS

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

• 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:

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]

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]