Leveraging the power of angular's $asyncValidators by implementing a cache

Question

Leveraging the power of angular's $asyncValidators by implementing a cache

I've created a validation directive that verifies a value against an endpoint

App.directive('validate', function(fooService, $q) {
  return {
    restrict: "A",
    require: "ngModel",
    link: function(scope, elem, attrs, ngModel) {
      ngModel.$asyncValidators.async = function(modelValue, viewValue) {
        return fooService.get(viewValue)
        .then(function(resp) {
          if (!resp.data.success) {
            return $q.reject('Not found');
          } else {
            return true;
          }
        });
      };
    }
  };
});

I'm looking for a method to store previous results of the call and compare them before making a new AJAX request. Is there a way to achieve this?

javascript html css angularjs

Answer 1

Answer №1

A possible approach is to store the outcome in a variable like so:

App.directive('validate', function(fooService, $q) {

    var previousResults = {};

    return {
        restrict: "A",
        require: "ngModel",
        link: link
    };

    function link(scope, elem, attrs, ngModel) {
        ngModel.$asyncValidators.async = validateAsync;

        function validateAsync(modelValue, viewValue) {
            var previousResult = previousResults[viewValue];

            if(angular.isDefined(previousResult){
                var method = (previousResult === true) ? 'resolve' : 'reject';
                return $q[method](previousResult);
            }else{
                return fooService.get(viewValue)
                    .then(onSuccess)
                    .catch(onError);
            }

            function onSuccess(resp){
                return previousResults[viewValue] = !!resp.data.success;
            }

            function onError(){
                return previousResults[viewValue] = false;
            }
        }
    }
});

Remember that in AngularJS < 1.4 the $q.resolve was called $q.when.

Answer 2

A possible approach is to store the outcome in a variable like so:

App.directive('validate', function(fooService, $q) {

    var previousResults = {};

    return {
        restrict: "A",
        require: "ngModel",
        link: link
    };

    function link(scope, elem, attrs, ngModel) {
        ngModel.$asyncValidators.async = validateAsync;

        function validateAsync(modelValue, viewValue) {
            var previousResult = previousResults[viewValue];

            if(angular.isDefined(previousResult){
                var method = (previousResult === true) ? 'resolve' : 'reject';
                return $q[method](previousResult);
            }else{
                return fooService.get(viewValue)
                    .then(onSuccess)
                    .catch(onError);
            }

            function onSuccess(resp){
                return previousResults[viewValue] = !!resp.data.success;
            }

            function onError(){
                return previousResults[viewValue] = false;
            }
        }
    }
});

Remember that in AngularJS < 1.4 the $q.resolve was called $q.when.

Leveraging the power of angular's $asyncValidators by implementing a cache

Answer №1

Similar questions

Can you explain the distinct variations between these two approaches for obtaining API data?

AngularJS: Error - Angular object is undefined

An alternative solution for supporting Edge Chromium is utilizing synchronous AJAX requests within the beforeunload event

Display Vue component using a string input

Troubleshooting Issue: ASP.NET UpdatePanel Not Responding to jQuery

Creating a dropdown menu with data loaded dynamically using ajax and json, all without relying on jquery

Creating a Rails application that dynamically fills a table with data from a

Mysterious JQuery attribute

Access the checkboxes that were previously selected and store them for future use when the page is

Encountering a JavaScript toJSON custom method causing a StackOverflow error

Create a grid or flex layout with Bootstrap 4 that features a sticky first row and column

JavaScript struggles to obtain the timezone information when Daylight Saving Time is

What is the process for sending body data through Swagger in a Node.js/Express environment?

Locate a URL within a Java string and generate an HTML hyperlink tag

When the webpage is refreshed, a PHP code embedded within JavaScript is executed instead of waiting for a

Allowing Angular2 Components and their Sub Components to access a shared instance of ngModel within a service

Python - Selenium: A guide to locating elements based on color

Vercel and Firebase Realtime Database causing snapshot.val() to return null during build deployment

The code is triggering IE 8 to switch to compatibility mode resembling IE7

retrieveValue() for SelectionDropdown