Breaking Change: ng-class is having issue with form.$pending

[niemyjski]

As you can see in my screenshot.. $pending isn't defined when I output the form via json.. Is anyone else seeing this?

The source for this can be found here: https://github.com/exceptionless/Exceptionless.UI/blob/master/src/app/organization/manage/manage.tpl.html#L14-L24

[Narretz]

Please try to isolate the problem so you can put it in a plnkr or similar. Also, from what to which version were you updating when you encountered the problem?

[niemyjski]

Yes, I'll work on putting together a sample. I wanted to at least log this as I was testing.

[niemyjski]

I think the following jsfiddle demo will reproduce this issue.. However, I'm having issues getting it to run (I copy and pasted a second working example and that doesn't even work), for some reason my module is not being resolved... If you could help getting it to load I can investigate further..

https://jsfiddle.net/a5yrzep7/

[niemyjski]

I've created a screencast of this issue as well comparing 1.3.x vs 1.4.x

http://screencast.com/t/GLDsnCRi345

[lgalfaso]

I am not seeing the issue with Chrome 43 OSX. Is this browser specific?

[niemyjski]

If you are looking at that jsfiddle.. I couldn't get it to work.. there was an error in the console saying couldn't load module.... So you can't use that to be a judge of it.. I've only tried chrome and edge.

[lgalfaso]

I changed "Framework and Extension" to "No-Library (pure JS)" and everything worked. https://jsfiddle.net/s9gcnmhh/ What I cannot do is to reproduce the error

[niemyjski]

Thanks, I'll try tracking this down more this week

[niemyjski]

I've narrowed this down to my async validator..

    .directive('searchFilterValidator', ['$q', 'searchService', function($q, searchService) {
      return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
          ngModel.$asyncValidators.valid = function(query) {
            var deferred = $q.defer();

            if (ngModel.$pristine) {
                deferred.resolve(true);
            } else {
              searchService.validate(query).then(function(response) {
                if (!response.data.is_valid) {
                  deferred.reject(response.data.message);
                }
                deferred.resolve(true);
              });
            }

            return deferred.promise;
          };
        }
      };
    }]);

Seems to leave pending == true in some cases. However if I wrap it in a timeout it works every time.. Seems like some kind of a race condition.

    .directive('searchFilterValidator', ['$timeout', '$q', 'searchService', function($timeout, $q, searchService) {
      return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
          ngModel.$asyncValidators.valid = function(query) {
            var deferred = $q.defer();

            if (ngModel.$pristine) {
              $timeout(function () {
                console.log('pristine');
                deferred.resolve(true);
              }, 1);
            } else {
              searchService.validate(query).then(function(response) {
                if (!response.data.is_valid) {
                  deferred.reject(response.data.message);
                }
                deferred.resolve(true);
              });
            }

            return deferred.promise;
          };
        }
      };
    }]);

[Narretz]

I still cannot reproduce the problem. Also, in your first post, you said that $pending is undefined, in your last post you say $pending stays true in some cases. So we'll still need a better repro.

[Narretz]

Closing this until we have a better demo.

[niemyjski]

@Narretz Here is a plunk that I think reproduces the issue I was seeing.

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

[niemyjski]

Wait it's not the same bug because pristine is modified and it wasn't in my use case.