Search code examples
angularjsformsvalidationng-messages

Angular - Firing message onBlur after user edits field

Like others, I have been looking for a good way to validate my forms with Angular without the messages being too aggressive. The closest I have gotten is checking for $dirty and $touched prior to firing the messages. Which works for most situations.

The one situation I can't figure out is when the user edits, for example, a required field. The field has text in it, is valid, dirty, and touched. The user goes back into the field to change it. They backspace what is in the input and immediately the message fires because the input is now dirty, touched, and invalid. I'd rather it "reset" at that point and reevaluate when the user blurs the input again. Give them a chance to fill in the input while it's still focused.

Make sense? Any ideas?

Thanks! Matt

Solution

  • Perhaps this works:

    ng-model-options="{ updateOn: 'blur' }"

    Add it to your input element. I believe the validation will occur when the model is updated, this way the model gets updated on blur.

    Here you can see more options for this directive: https://docs.angularjs.org/guide/forms in Custom model update triggers. And a more detailed explanations in ngModelOptions.

    Let me know if it works :)