Uncaught TypeError: Cannot read property 'isValidationCancelled' of null(…)

[padala]

I'm getting this error. I think the getFormElementByName() is returning null and is not able to proceed further. I'm showing a popup on browser back button and preventing the route change using preventDefault(). After this whenever I select a input box I'm getting the following error and the fields are not validated anymore.

@ghiscoding : Any thoughts on this? Thanks.

[ghiscoding]

If I look in the code, it uses it this way

// if validation is cancelled, then erase error message
      if(!!formElmObj && formElmObj.isValidationCancelled === true) {
        message = '';
      }

So technically calling it like this at first if(!!formElmObj... should not be a problem on a null, it should stop right there. However !!formElmObj is when true or filled, so the property might be filled but without having a isValidationCancelled property. I should probably check to see if that property does exist (with hasOwnProperty) but anyhow that won't help you much, does it?

[ghiscoding]

Which Router are using? I might have found a possible problem with UI Router, I got code for the regular Angular Router but I forgot to have an option for UI Router which I might need to address.

[padala]

Yes I'm using regular Angular Router.

[ghiscoding]

I actually just pushed version 1.5.10 to fix a UI Router issue but since you just said that you use regular Angular Router then it's probably unrelated to your issue.

[ghiscoding]

Could you try changing the Global Option resetGlobalOptionsOnRouteChange to false instead of the default true, please refer to Wiki - Global Options for more info.

If that doesn't help, then I would need a Plunker example to help you more.

[padala]

Thanks @ghiscoding. Will check it out.

[ghiscoding]

I have put in a fix for a long standing problem I've seen with passing formName to checkFormValidity() and so, checkFormValidity($scope.formName) should work as expected.

Please update to your project to latest version 1.5.11.

Please close the ticket if that fixes your issue. Thanks

[ghiscoding]

A small issue was created by prior version, please update to version 1.5.12 to be on the safe side.

Could you also close the issue, if this fixes it. Thanks

[vamshikrishnab]

scope.$on('angularValidation.revalidate', function(event, args){
if (args == ctrl.$name)
{
ctrl.revalidateCalled = true;
var value = ctrl.$modelValue;

          if (!elm.isValidationCancelled) {
          // attempt to validate & run validation callback if user requested it
          var validationPromise = attemptToValidate(value);
          if(!!_validationCallback) {
            commonObj.runValidationCallbackOnPromise(validationPromise, _validationCallback);
          }
        }
        else {
          ctrl.$setValidity('validation', true);
        }
      }
    });

The issue reported by @padala is due to above code which is present in 'validation-directive.js'.
I think fix needs here in this 'if' condition i.e

if (!!elm && !elm.isValidationCancelled) {
// attempt to validate & run validation callback if user requested it
.....
......

}

[ghiscoding]

Thanks for the finding, however I don't see how this can happen. If the element is null then what's the point of attaching a validation? If someone uses Angular-Validation into another directive, I think that the other directive should check the null elm before adding the validation.

I could certainly add a null elm check in my Angular-Validation directive but I don't really see the point. I mean if you are using Angular-Validation it's because you have an element that exist in the DOM... don't you?

I don't mind adding a null elm check in my directive, but I'd like to know how this can be really useful. If you could give more details, I'll be happy to understand. Thanks

[vamshikrishnab]

Thanks for the reply.
http://plnkr.co/edit/Agkimo8K8xypHuGMSb1j?p=catalogue

Above plnker has Snapshot of my code, on route change event, I am showing a popup confirmation modal, if user clicks 'Yes' I am firing an event 'createStudent' from 'PopupController' which is handled in 'StudentCreationCntrlr' and from the handler I am calling 'submitAction' function. This is case where I am seeing "Uncaught TypeError: Cannot read property 'isValidationCancelled' of null(…)" error message in the console.

[ghiscoding]

Hello and thanks for providing the Plunker, however it seems to be incomplete as all the scripts are missing and even if I had them (copy+paste from my own plunker), it still gives a few errors. It's a little hard to help if there is no functional plunker.

If it's too long to get a functional plunker, then 1 thing you could do is to use the unminified version of Angular-Validation (if you use NPM, you could just point to them or if you don't then the best is to download the whole Angular-Validation as a zip and use them in your project. The order of the unminified version has to be like the following:

<script type="text/javascript" src="./src/validation-directive.js"></script>
<script type="text/javascript" src="./src/validation-service.js"></script>
<script type="text/javascript" src="./src/validation-common.js"></script>
<script type="text/javascript" src="./src/validation-rules.js"></script>

I would suggest you start by modifying 2 lines of code and see if that helps you at all. Could you modify slightly the validation-directive.js to make sure that isValidationCancelled is only called is available. You can modify 2 lines of code

// validation-directive.js
// line 98,  from this:
if (!elm.isValidationCancelled) {
 ...
// to this:
if (!!elm && elm.hasOwnProperty("isValidationCancelled")) {
...

// then line 269, from this:
if (!formElmObj.isValidationCancelled) {
...
// to this:
if (!!formElmObj && formElmObj.hasOwnProperty("isValidationCancelled")) {
...

Those lines are the only lines that could send the error you describe to the console. I'm not sure how much that will help you because at the end what comes down is that you have a form element or an element that is null, which is why the validation fails. But the question is more... why are they null to start with?

[padala]

We're using ng-router. When user presses browser back we're preventing him and asking him to save the changes. After preventing the event of locationChangeStart we're getting this error when a field is focused/selected. I think somehow resetGlobalOptions is becoming false on routechange.