Server Side errors are not dismissed after field edit

[emfor]

Hi,
I wanted to test adding server side errors. When I submit the form, fields gets highlighed, but when I edit it. It doesn't remove the validation. Simple example: http://plnkr.co/edit/Ep6XsbyrFDYHkNlhSWBO?p=info

[jonsamwell]

Thanks, I'll take a look - I think it is because when the server error gets set there is no function to determine if it is valid once the field has been edited. I'll look at adding a property that determines if these errors should be cleared when the ng-model is updated. However, in the mean time you could call ngModelCtrl.removeExternalValidation.

https://github.com/jonsamwell/angular-auto-validate/blob/master/src/config/ngModelDecorator.js#L81

Thanks,

Jon

[emfor]

Coluld You help me with removeExternalValidation, I've tried something like:

<input name="field" .... ng-change="myForm.field.removeExternalValidation('', true)" />

there is no key name, because it's a server custom message. Unfortunately it doesn't work...

Thanks,
Mateusz

[jonsamwell]

Have you tried just adding a key name when you invoke the setExternalValidatino('server-error',.....);
Then you could do the reverse here myForm.field.removeExternalValidation('server-error', true);

I'll do this enhancement soon as I think it is needed. I'll keep you posted. Let me know if this works as a temp workaround.

Thanks for using the module!

[emfor]

The problem is that when I add 'server-error' then I would need to add a key to the lang, but messages from server are different. I'll wait then for the enhancement, I'm not in a hurry... :)
By the way I've translated the lang to Polish. I'll send it by email.

Thanks,
Mateusz

[jonsamwell]

Thanks for the translation! Right, I'll get on with the enhancement for you this week (just assume it is going to work for now).

[emfor]

Any luck with this one?

Best regards,
Mateusz

[jonsamwell]

I'm going to tackle this tomorrow - sorry for the delay!

[jonsamwell]

Hi @emfor sorry for the delay. This issue should no be resolved in the latest release v1.18.4. The external validation errors are removed by default when the control or form is validated. To stop this behavior add the attribute to the parent form.

<form remove-external-validation-errors-on-submit="false" ng-submit="submit();">....</form>

Let me know how you get on.

Jon

[abobwhite]

Hi @jonsamwell and @emfor

We recently upgraded our application to Angular 1.3.15 and this feature is giving me problems. Previously (Angular 1.2.18), I'd set server-side errors in the form form.setExternalValidation(message.field, null, message.message, true); but now after editing the field, the external validation is gone but the default error message kicks in. By adding your new attribute, remove-external-validation-errors-on-submit="false" I no longer get the default error message but some of my other validation no longer goes away, i.e. ng-minlength. The attribute name doesn't seem to make sense to fixing this initial issue and I now have your latest build and things are still not working right. I could use form.removeExternalValidation, however, I don't have a good way to initiate that cleanly unless you all have some thoughts how to do that generically.

[abobwhite]

I debugged a bit further - it appears that with the default settings (no remove-external-validation-errors-on-submit="false"), this gets called: removeAllExternalValidation which indeed does remove the error but then in another event, the error gets populated with the default error message again because it can't find the key it was created by (in this case "null" or I've also tried ""). This appears to happen even if I set addToModelErrors to false in setExternalValidation....

[abobwhite]

Also, it turns out that it wasn't angular version related, but I had pulled in an update version of angular-auto-validate back in March that looks like it broke this and didn't catch it until now. The newest version shows the same issue.

[abobwhite]

@jonsamwell

I've continued debugging on this. It appears that modelCtrl.$invalid stays true even though we've removed the external validation. This is causing the else condition on line 919 to be executed: validator.makeInvalid(el, errorMsg); when in reality, it should never hit this block because it is actually valid. I'm looking for a solution.

[abobwhite]

@jonsamwell @emfor

Sorry for the spam. I've figured out the issue. Here it is:

In removeAllExternalValidation, the code incorrectly assumes we had previously set addToModelErrors to true. So when looping over the ngModelCtrl.externalErrors and using those keys to then set the corresponding ngModelCtrl.$error key to true, we are in fact creating that key and setting it to true. Even though this is being set to true, ngModel is still considering this $invalid. Intead of this:

angular.forEach(ngModelCtrl.externalErrors, function (value, key) {
    errorCollection[key] = true;
});

it looks like we should just delete the entry (if it exists) and it should cover both cases. Since this was an external error to begin with, when we are wiping them out, we don't care that the value exists on ngModelCtrl.$error and is true so we should just delete it. If addToModelErrors was originally false, this delete still works (it just no-ops because the key never existed):

angular.forEach(ngModelCtrl.externalErrors, function (value, key) {
    delete errorCollection[key];
});

If you think this change is reasonable, let me know. I can make a pull request or if you have time, you can make this small change.

[abobwhite]

@jonsamwell Have you gotten a chance to see my comments above?

[jonsamwell]

@abobwhite Sorry for the late reply this should now be fixed in the latest release v1.18.8