Server side validation error messages directive

[KamBha]

Hi,
I am trying to create a simple way for the server side to return an error associated with a JSON path and have that information translate to a field error.  For example, if the server returns:-

{ "errorMessage": "Code not valid when you say you want to leave on a Tuesday", "field" : "room[1].stay.code" }

And I can then target the field directly.  One way I thought about making this work is to make sure every value is an object and add a $$error where an error occurs.  So, if you have this:-

$scope.room[1].stay.code

Then there would be some code  which turns that value into an object (in case it isn't already) and adds $$error to that object as the message.  Like so:-

$scope.room[1].stay.code.$$error = 'Code not valid when you say you want to leave on a Tuesday';

I have tried to achieve this with a directive:-

<input type="text" name="fruitName" ng-model="data.value" serverError="data.value.$$error" />

In this case serverError would be a path to the $$error value.

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.doSomething = function () {
    alert('Submitted!');
  }
  $scope.data = {};
  $scope.data.value = new String('blah');
  $scope.data.value.$$error = 'My Error';
  $scope.data.toggleError = function() {
    if ($scope.data.value.$$error) {
      $scope.data.value.$$error = null;   
    }
    else {
      $scope.data.value = new String($scope.data.value);
      $scope.data.value.$$error = "SOME ERROR";
    }
  };
});


app.directive('input', function (){
   return {
      require: 'ngModel',
      restrict: 'A',
      scope: { serverError : "=serverError" },
      link: function(scope, elem, attr, ctrl) {
          var verificationFunction = function(viewValue) {

              if(scope.serverError) {
                 ctrl.$setValidity('serverError',true);
                 return viewValue;
              }
              else {
                 ctrl.$setValidity('serverError',false);
                 return undefined;
              }
        };

        ctrl.$parsers.unshift(verificationFunction);
        ctrl.$formatters.unshift(verificationFunction);
        verificationFunction();

      }
   };
});

I have a plunkr with my attempt:-

http://plnkr.co/edit/Ug9oM1LNqPpTsONhRTnG?p=preview

Now, I have had some success with 1.1.4, except that it does not seem to mark the form as invalid (but it  does mark the field as invalid).  Also, as soon I change the version to anything greater than that (eg 1.1.5) it stops working completely.

What am I doing wrong?

Thanks.

Kamal.

[Cesar Andreu]

I implemented a directive / service combo to do this.

You can check out the repo here: https://github.com/cesarandreu/angular-server-form

And I wrote a blog post on using it with Rails here: http://blog.cesarandreu.com/posts/form_validation_with_angularjs_and_rails

It's easily extensible for usage with any backend, though.

I can't assure you it works with such an old version of angular, though. I've only tested it with 1.3 betas.

[Kamal Bhatt (personal)]

I don't really want to use such old versions. I am interested in 1.2.x though.

Thanks, I will take a look and let you know how well it works in 1.2.x.

Also, I am still interested in know what I did wrong.

Thanks.

Kamal.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/EUy9LtEYbFY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[KamBha]

Hi Cesar,
Can you describe what the error structure is for repeating values?  For example, if you have this:-

{  "cars" : [ { "name" : "Ford", "type" : "4WD" }, { "name" : "Toyota", "type" : "4WD" } ]

And the server side validation message is on the name of the second "car" element, how do you communicate this error?

Thanks.

Kamal.

[KamBha]

OK, I have solved my own problem:-

http://plnkr.co/edit/Ug9oM1LNqPpTsONhRTnG?p=preview

What I did was not use isolate scope.  It turned out not to be too bad.

Cheers.

Kamal.