Validation and promises in the world of AngularJS

Question

Validation and promises in the world of AngularJS

Validation of a form in an Angular app involves using a custom JavaScript function before submission. Depending on a condition, a confirmation dialog needs to be displayed to the user, requiring them to confirm or reject it before proceeding with validation. However, I am struggling to achieve this asynchronously. It seems like I may not be utilizing promises correctly, but I'm unsure about what changes need to be made.

Factory

app.factory("confirmDialogService", ['$q', 'ngDialog',
  function ($q, ngDialog ) {
  return {
    popConfirm: function () {
        var deferred = $q.defer();
        var confirmed;
        setTimeout(function () {
                ngDialog.openConfirm({
                    template: 'template/confirmDialog.html',
                    className: 'ngdialog-theme-default'
                }).then(function (value) {
                    console.log('Modal promise resolved. Value: ', value);
                    deferred.resolve(confirmed =  true);
                }, function (reason) {
                    console.log('Modal promise rejected. Reason: ', reason);
                    deferred.reject(confirmed =  false);
                });
        }, 1000);
        return deferred.promise;
      }
  };
}]);

Controller

  $scope.checkSomething = function (){
    if(needsConfirmation)
    {
        console.log('about to pop confirm');
        confirmationService.popConfirm().then(function(confirmed){
            console.log( 'from popConfirm() ' + confirmed + ''); // never logged
            return confirmed;
        }, function(){
        // something went wrong
            return false;
        });
    }
    else
        return true;
}

Although the confirmation dialog is displayed, clicking yes or no does not produce the expected results.

I would like to obtain a true/false value based on whether the user confirms or dismisses the dialog, similar to:

var canProceed = $scope.checkSomething();

I believe I might need to wrap this in another promise, but I am uncertain how to do so. Any assistance would be greatly appreciated.

Thank you,

javascript angularjs promise angular-promise ng-dialog

Answer 1

Answer №1

Instead of creating an additional promise with $q.defer(), you can simply utilize the Promise returned by openConfirm:

app.factory("confirmDialogService", ['$q', 'ngDialog', function ($q, ngDialog) {
    return {
        popConfirm: function () {
            return ngDialog.openConfirm({
                template: 'template/confirmDialog.html',
                className: 'ngdialog-theme-default'
            }).then(function (value) {
                console.log('Modal promise resolved. Value: ', value);
                return true;
            }, function (reason) {
                console.log('Modal promise rejected. Reason: ', reason);
                return false;
            });
        }
    };
}]);

The usage of checkSomething would be as follows:

$scope.checkSomething = function () {
    if (needsConfirmation) {
        return confirmationService.popConfirm().then(function (confirmed) {
            return confirmed;
        }, function () {
            return false;
        });
    } else {
        return $q.when(true);
    }
}

Now, instead of directly returning true or false, it returns a promise object. Therefore, you should treat $scope.checkSomething() as an asynchronous operation using promises:

$scope.checkSomething().then(function() {
    // Proceed with the operation
}, function() {
    // Handle any failures
});

To sum it up, remember that checkSomething must return a promise and not just boolean values.

Answer 2

Instead of creating an additional promise with $q.defer(), you can simply utilize the Promise returned by openConfirm:

app.factory("confirmDialogService", ['$q', 'ngDialog', function ($q, ngDialog) {
    return {
        popConfirm: function () {
            return ngDialog.openConfirm({
                template: 'template/confirmDialog.html',
                className: 'ngdialog-theme-default'
            }).then(function (value) {
                console.log('Modal promise resolved. Value: ', value);
                return true;
            }, function (reason) {
                console.log('Modal promise rejected. Reason: ', reason);
                return false;
            });
        }
    };
}]);

The usage of checkSomething would be as follows:

$scope.checkSomething = function () {
    if (needsConfirmation) {
        return confirmationService.popConfirm().then(function (confirmed) {
            return confirmed;
        }, function () {
            return false;
        });
    } else {
        return $q.when(true);
    }
}

Now, instead of directly returning true or false, it returns a promise object. Therefore, you should treat $scope.checkSomething() as an asynchronous operation using promises:

$scope.checkSomething().then(function() {
    // Proceed with the operation
}, function() {
    // Handle any failures
});

To sum it up, remember that checkSomething must return a promise and not just boolean values.

Answer 3

Answer №2

In order to pass into the resolve and reject methods of a promise, you do not necessarily need a variable (although it will still work):

           .then(function (value) {
                console.log('Modal promise resolved. Value: ', value);
                deferred.resolve(true);
            }, function (reason) {
                console.log('Modal promise rejected. Reason: ', reason);
                deferred.reject(false);
            });

When dealing with this in the controller:

$scope.checkSomething = function (){
    if(needsConfirmation)
    {
        console.log('about to pop confirm');
        confirmationService.popConfirm().then(function(confirmed){
            console.log( 'from popConfirm() ' + confirmed + ''); // never logged
            return confirmed; <-- this is not(!) a return of checkSomething method, this is return of success callback
        }, function(){
        // something went wrong
            return false; //same as above
        });
    }
    else {
        return true;
    }
}

Therefore, you cannot simply assign the result of $scope.checkSomething() to a variable.

You must set this variable within the callbacks:

            var canProceed;
            confirmationService.popConfirm().then(function(confirmed){
                canProceed = true;
            }, function(){
            // something went wrong
                canProceed = false;
            });

Answer 4

In order to pass into the resolve and reject methods of a promise, you do not necessarily need a variable (although it will still work):

           .then(function (value) {
                console.log('Modal promise resolved. Value: ', value);
                deferred.resolve(true);
            }, function (reason) {
                console.log('Modal promise rejected. Reason: ', reason);
                deferred.reject(false);
            });

When dealing with this in the controller:

$scope.checkSomething = function (){
    if(needsConfirmation)
    {
        console.log('about to pop confirm');
        confirmationService.popConfirm().then(function(confirmed){
            console.log( 'from popConfirm() ' + confirmed + ''); // never logged
            return confirmed; <-- this is not(!) a return of checkSomething method, this is return of success callback
        }, function(){
        // something went wrong
            return false; //same as above
        });
    }
    else {
        return true;
    }
}

Therefore, you cannot simply assign the result of $scope.checkSomething() to a variable.

You must set this variable within the callbacks:

            var canProceed;
            confirmationService.popConfirm().then(function(confirmed){
                canProceed = true;
            }, function(){
            // something went wrong
                canProceed = false;
            });

Validation and promises in the world of AngularJS

Answer №1

Answer №2

Similar questions

comparison of declarative loop and imperative loop

Utilizing jQuery to implement a function on every individual row within a table

Selecting the appropriate technology or library for incorporating user-defined text along a designated path within established areas

Dragging items in the horizontal list of Knockout-Sortable causes them to be pushed vertically

How can I store a value or text to track view counts or a counter efficiently?

Issue with Chart.js V3.20: Struggling to Filter Legend Labels

Using ngMock in Protractor should only be done in a testing environment

Combining meanings within a geometric interface

The request from localhost:3000 to localhost:3003 could not be proxied by ReactJS

What is the connection between importing and using destructuring in ES6 syntax?

`Stop the JW Player from playing several videos simultaneously`

Error: Unexpected character encountered

JavaScript node.js JSON Arrays

Extract token from the URL and then use Axios in Vue.js to send it to the POST API

There was an unforeseen conclusion to the JSON input while attempting to parse it

Tips for iterating through/range over an array depending on the initial point?

Combining AngularJS with Bridgeit.js for a seamless mobile web app experience

The filter predicate function is failing to produce a result and the following error occurs: Unable to access the 'data' property in MatTableDataSource within

Encountering an issue with resolving a local variable during the execution of a test with Protractor

Node.js's async functions seem to be running sluggishly