Passing a value back to a template from a promise

Question

Passing a value back to a template from a promise

Currently, I am implementing server-side validation for dynamically created input fields within div tags. The issue I am facing is that I need to display the API error message in my template instead of directly setting it in my controller. If I set it in the controller, it will impact all input fields.

My approach is to implement something like the following:

#Template
..<span ng-show="innerNameForm.name.$error.apiResponse">{{ msg }}</span>


..<input type="text" ng-change="msg = someFunction(inputValue, innerNameForm)"...... />

#Controller
scope.someFunction = function(value, form){

    apiMsg = timeout(function() {

        var prom = vcRecordValidate.name(value, record_id).then(function(promise){

            //If fails... do this
            form.name.$setValidity('apiResponse', false);... 
            return promise; //This contains the API error message

        });
        
        return prom;

    }, 1000);

    return apiMsg;

};

This code is just a simplified example and may be missing some unimportant details.

My question is, how can I effectively return the promise data to be displayed in my template?

javascript angularjs

Answer 1

Answer №1

With promises, you don't simply "return" data. Instead, you fulfill promises by providing data. Make sure to trigger promise.resolve(data) in order to send the data to your callback functions.

Answer 2

With promises, you don't simply "return" data. Instead, you fulfill promises by providing data. Make sure to trigger promise.resolve(data) in order to send the data to your callback functions.

Answer 3

Answer №2

When working with Angular, you can easily display a model from the $scope if it's a promise.

$scope.load = function (i) {
  var deferred = $q.defer();
  $timeout(function () {
     deferred.resolve('done with ' + i + ' !');
  }, 3000);
  return deferred.promise;
}
...
<span ng-repeat="item in items">{{load($index)}}</span>

However, this method can sometimes lead to recursive and potentially infinite $apply calls. A safer approach would be to display a subset of each item in the array.

<span ng-repeat="item in items">{{item.asyncResult}}</span>

For asynchronous loading of each item, you can use the following technique:

$timeout(function () {
  angular.forEach($scope.items, function (item, idx) {
    item.asyncResult = 'done with ' + idx + ' !';
  });
}, 3000);

When dealing with multiple inputs sharing the same name in a form, since Angular does not support dynamic names for form inputs, consider using nested ng-form elements with the same name. For more information, refer to this question.

Answer 4

When working with Angular, you can easily display a model from the $scope if it's a promise.

$scope.load = function (i) {
  var deferred = $q.defer();
  $timeout(function () {
     deferred.resolve('done with ' + i + ' !');
  }, 3000);
  return deferred.promise;
}
...
<span ng-repeat="item in items">{{load($index)}}</span>

However, this method can sometimes lead to recursive and potentially infinite $apply calls. A safer approach would be to display a subset of each item in the array.

<span ng-repeat="item in items">{{item.asyncResult}}</span>

For asynchronous loading of each item, you can use the following technique:

$timeout(function () {
  angular.forEach($scope.items, function (item, idx) {
    item.asyncResult = 'done with ' + idx + ' !';
  });
}, 3000);

When dealing with multiple inputs sharing the same name in a form, since Angular does not support dynamic names for form inputs, consider using nested ng-form elements with the same name. For more information, refer to this question.

Passing a value back to a template from a promise

My question is, how can I effectively return the promise data to be displayed in my template?

Answer №1

Answer №2

Similar questions

Utilizing AngularJS: Conditionally rendering ngIf within an array of objects containing unique properties

Steps for aligning an image and text within an icon next to each other

Building paths through a jQuery loop

AngularJS Drop-Down Menu

Adjusting the layout of tables for an accordion design

What is the best method to extract an array of values or rows from my grid layout?

Replace .Mui-disabled (or any other pseudo-classes/states) in the MUI v4.1.X theme with custom styling

The ng module instantiation failed because of an error related to an unresolved dependency for $logProvider. More information can be found at http://errors.angularjs.org/undefined/$injector/unpr?p0=%24log

HTML control for adjusting the pan and tilt of a device

Resizing and uploading multiple images with accompanying descriptions

Error in canvas-sketch: "THREE.ParametricGeometry has been relocated to /examples/jsm/geometries/ParametricGeometry.js"

Passing variables dynamically in a created Express.js route

Finding the index of a column based on a continuous sequence of values can be achieved by following these

What does it mean in Javascript when b1 is undefined while o1 has a value and is equal to b1?

Using document.getElementById will only target a single item

Switch out the name of multiple elements with mootools

What is the best way to reference an ImageButton using jquery?

Please indicate the number of lines for the href within the span element

What causes errors in URL routeProvider with AngularJS?

Intellij IDEA does not offer auto-completion for TypeScript .d.ts definitions when a function with a callback parameter is used