Skip to content
This repository has been archived by the owner on Aug 15, 2021. It is now read-only.

Custom external validation dissapearing #125

Open
sarg3nt opened this issue Dec 29, 2015 · 2 comments
Open

Custom external validation dissapearing #125

sarg3nt opened this issue Dec 29, 2015 · 2 comments

Comments

@sarg3nt
Copy link

sarg3nt commented Dec 29, 2015

OK, this one is a stretch but I'm pulling my hair out here.
I have a directive for phone number validation that calls an API. I'm using ctrl.setExternalValidation('phone', 'validateSelPhone');
to show the error message when the validation fails. It seems to work they way I want EXCEPT about 80% of the time the error message flashes up for just a split second. Something is removing the block that is getting inserted into the DOM.
We have a rather large and complex app. I'm trying to narrow down what is doing it but so far with no luck.
I've created a plunk to simplify things but it seems to work fine. Which makes me think it is something in our site.
http://plnkr.co/edit/54rpV2hfY1uKnD8xCFsh?p=info

I've looked into the
ctrl.removeExternalValidation('phone');
function and made sure it is not being called by accident. I even commented out all of the lines in the auto validate code so I know it wasn't doing it. Still no luck.
We are running:
angular-auto-validate - v1.19.3 - 2015-11-30
angular 1.4.5

Any thoughts or suggestions as to how I might track this down?
See the Plunker for a synopsis of how the code works.
Note: Yes I know the API call is failing with a CORS error, doesn't matter, just needs to return a 4xx error.

@sarg3nt
Copy link
Author

sarg3nt commented Dec 29, 2015

I've sorta got it fixed but am not happy with it. Something is still "going on".
I fixed it by adding a setTimeout.

validatePhoneService.checkPhone(scope.countryCallingCode, scope.phone).then(function () {
  scope.countryCallingCode = validatePhoneService.countryCallingCode;
  scope.phone = validatePhoneService.phone;
  ctrl.$setViewValue({ countryCallingCode: scope.countryCallingCode, phone: scope.phone });
  ctrl.removeExternalValidation('phone');
}, function () {
  setTimeout(function () { ctrl.setExternalValidation('phone', 'validateSelPhone'); }, 100);
});

The strange thing about it is that with each keypress the error goes away for a split second then is shown again (if it's invalid), but in the Plunk the error message does not flicker or get removed until removeExternalValidaiton is called.
Something is removing it and I just don't know what. Very frustrating.
Any thoughts or ideas are appreciated.
Note: I have to do 100 milliseconds, anything smaller and it doesn't work.

@itsamritchahal
Copy link

I was having the same issue when I was using angular 1.5.7 but switching back to 1.2.29 fixed the issue. There seem to be a compatibility issue with the newer version of angular.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants