Currently, I'm facing an issue while trying to submit a form that requires the user's email to be non-duplicated. Before making the POST request, I want to add a small animation for visual appeal. However, in the $scope.process function, I encounter the following error:
TypeError: Cannot read property 'catch' of undefinedThis error occurs because $scope.process returns before the $http.post operation is completed. How can I modify the process() function to return the promise instead of undefined?
Currently, this is what my code looks like:
//Submit form function
$scope.submitForm = function () {
$('.btn').attr('disabled', true);
if ($scope.form.$valid) {
$scope.process($scope.account)
.catch(function (err) {
if (err.code === 'duplicate') {
// Error handling logic
}
});
return false;
}
};
//Function responsible for sending the HTTP request
$scope.process = function(body) {
// Timeout before http post to allow for animation
$timeout(function() {
return $http.post(postUrl, body).then(function (response) {
// This will return a promise if the $timeout is removed
var nextPage = response.data;
}).catch(function (err) {
throw err;
});
}, 300);
// Returns undefined due to $timeout delay
};
Thank you for your assistance.