Implementing async validation using $http

Implementing asynchronous validation in AngularJS typically involves validating input against a remote server or an API. This is useful when you need to check if a user’s input, such as a username or email address, already exists in the system before the form is submitted. You can perform async validation by making HTTP requests using $http service to communicate with a backend server.

Steps to Implement Asynchronous Validation Using $http

In this example, we will create a form with an asynchronous email validation feature. The backend service (simulated with $http) will check if the email is already in use, and based on the response, the input will either be marked as valid or invalid.

1. Basic Setup of AngularJS Application

First, set up your AngularJS application and include necessary modules. We will use $http for making the asynchronous request and ngModel for binding the form fields.

HTML (Form Template)

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="FormController">
    <form name="myForm" ng-submit="submitForm()" novalidate>
        <label for="email">Email:</label>
        <input type="email" name="email" ng-model="formData.email" ng-required="true" ng-change="checkEmailAvailability()" />
        <span ng-show="myForm.email.$error.required && myForm.email.$dirty">Email is required.</span>
        <span ng-show="myForm.email.$error.email && myForm.email.$dirty">Invalid email format.</span>
        <span ng-show="emailTaken">This email is already taken.</span>

        <br/><br/>

        <button type="submit" ng-disabled="myForm.$invalid || emailTaken">Submit</button>
    </form>
</body>
</html>

2. Controller Logic for Asynchronous Validation

Now, we will create a controller that includes the checkEmailAvailability function, which uses $http to check if the entered email already exists.

JavaScript (app.js)

angular.module('myApp', [])
  .controller('FormController', function($scope, $http) {
    $scope.formData = {};  // Holds form data
    $scope.emailTaken = false;  // Flag for email availability

    // Function to check email availability using $http (simulating async request)
    $scope.checkEmailAvailability = function() {
      if ($scope.formData.email) {
        $http.get('/api/check-email', { params: { email: $scope.formData.email } })
          .then(function(response) {
            if (response.data.exists) {
              $scope.emailTaken = true; // Email already exists
              $scope.myForm.email.$setValidity('emailTaken', false); // Mark the email field as invalid
            } else {
              $scope.emailTaken = false; // Email is available
              $scope.myForm.email.$setValidity('emailTaken', true); // Mark the email field as valid
            }
          })
          .catch(function() {
            // Handle errors (e.g., server issues)
            alert("An error occurred while checking the email.");
          });
      }
    };

    // Handle form submission
    $scope.submitForm = function() {
      if ($scope.myForm.$valid) {
        alert("Form submitted successfully!");
      } else {
        alert("Please fill out the form correctly.");
      }
    };
  });

3. Backend Simulation

For this example, we are simulating the server response using $http. In a real application, you would have an actual backend API (e.g., using Node.js, PHP, etc.) to check if the email exists in the database.

Here’s how you could simulate an API call that checks if the email exists:

angular.module('myApp').config(function($httpProvider) {
  // Mocking backend response for email validation
  $httpProvider.interceptors.push(function($q) {
    return {
      request: function(config) {
        if (config.url === '/api/check-email' && config.params.email === 'taken@example.com') {
          // Simulate an email that already exists
          return $q.reject({ data: { exists: true } });
        }
        // Simulate an email that doesn't exist
        return config;
      }
    };
  });
});

In this mock setup, the email 'taken@example.com' is always treated as already taken, while any other email is considered available.

4. Explanation of Key Features

ng-change="checkEmailAvailability()": This triggers the asynchronous email validation every time the user types in the email field. It sends an HTTP GET request to check if the email is already in use.
$http.get(): This sends an HTTP GET request to the backend API with the email as a query parameter. If the response indicates that the email exists, the form field will be marked invalid, and a message will appear.
$scope.myForm.email.$setValidity('emailTaken', false): This method is used to manually update the validity of the email field. We are setting the validity to false if the email already exists, which causes the form field to be invalid and disables the submit button.
ng-disabled="myForm.$invalid || emailTaken": This disables the submit button if the form is invalid or if the email is already taken.