Angular X-editable with Restangular remote validation

07 Oct Angular X-editable with Restangular remote validation

Posted at 18:49h in javascript by
0 Likes

Working with edit in place using the Angular x-editable directive I needed to validate the data remotely before to close the edit form, actually if you want to do that there is an example here: http://vitalets.github.io/angular-xeditable/#validate-remote so I just wanted to add the same example for that validation but using Restangular and my example should look like this:

The service

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
AutoresponderApp
  .factory('SubscriberService', ['Restangular',
                                 function(
                                   Restangular
                                 ) {
    var model;
 
    model = 'api/v1/subscribers';
 
    return {
      validateEmailSubscriberUpdate: function(params) {
        return Restangular.all(model + '/validate_email').post(params);
      },
    };
  }
]);

The controller:

1
2
3
4
5
6
7
8
9
10
11
$scope.validateEmail =  function(data) {
  var d = $q.defer();
  var _data = prepareData(data);
  SubscriberService.validateEmailSubscriberUpdate(_data).then(function(successResponse) {
    d.resolve()
  }, function(errorResponse) {
    d.reject(errorResponse.data.error);
  });
 
  return d.promise;
}

The template view:

1
<span e-name="email" e-required="" editable-text="subscriber.email" onbeforesave="validateEmail($data)" ></span>

Backend server side:

when there is a validation error the server will respond with 422 status and will return the validation error message as well just like this:

1
{ data: {error: 'validation error'}, status: 422, statusText: "Unprocessable Entity }

so there you go, hope you find useful this quick tutorial, regards

H.

No Comments

Post A Comment