Search code examples
angularjsng-messages

Angular messages validation file on blur

Is there a way to define the ng-message to show on blur, if I define it in an extra file?

For example I define following extra ng-messages error-file:

<p ng-message="required">This field is required</p>
<p ng-message="minlength">This field is too short</p>
<p ng-message="maxlength">This field is too long</p>
<p ng-message="required">This field is required</p>
<p ng-message="email">This needs to be a valid email</p>

What I want to do is, to show the ng-message only on blur, like:

<div class="help-block" ng-messages="userForm.name.$error" ng-show="userForm.name.$touched">
    ...
</div>

To use ng-show I need the form, input and event name. Can I somehow mock it in the extra error-file? For example with some placeholder, like when using Windows: $DIR$ or something like that?

Solution

  • You have to use ngMessagesInclude directive as below:

    <div class="help-block" ng-messages="userForm.name.$error" ng-show="userForm.name.$touched">
  <div ng-messages-include="your_path.html"></div>
</div>

    Check this tutorial for more info.