Show ngMessage only when field is dirty

[willmruzek]

I'm currently working on a project where validation messages are only shown when the form field is $dirty. I'm working with 1.3.0-beta.8 and ngMessages.

Is there / can there be a way to do this purely with ngMessages?

I could use ngIf but that seems to defeat the purpose of ngMessages.

One idea I had was to add a when attribute to <ng-messages>. The use would look like the following:

<ng-messages for="form.gameTitle.$error" when='form.gameTitle.$dirty'>
  <ng-message when="required">Please enter a title.</ng-message>
</ng-messages>

[matsko]

Why not just use ng-if instead of when? Maybe there could be a flag on the <form> element that does this.

[willmruzek]

Thanks, @matsko. That would work. For some reason I was thinking the following when I originally posted this:

<div ng-if="f.gameTitle.$dirty">
    <ng-messages for="f.gameTitle.$error">
      <ng-message when="required">Please enter a title.</ng-message>
    </ng-messages>
</div>

I was concerned about the extra div.

I now realize this could be done via <ng-messages for="f.gameTitle.$error" ng-if="f.gameTitle.$dirty"> as done here: http://codepen.io/anon/pen/CGqgf

This exposes a blind spot I have with Angular. How to directives work together? It has been unclear for me when both using and creating directives. Are there any good resources for this?

[matsko]

@mruzekw this is a bit of a grey zone with Angular 1.x since transclusion (90% of the time) is used to insert and remove an element from the DOM with respect to it's scope. Typically there is only one directive in charge of this. Therefore having two or more directives add/remove the element via transclusion or standard DOM leads to issues.

Therefore to answer your question if you see that the element has enter / leave animation hooks then changes are that an extra DIV may be required. If not then you should be OK to use your own directive or an NG directive that inserts and removes the element (just as ngIf does).