Angular ng-show is not executing with ng-message tag

Question

Not sure what I am doing wrong here. I want to display an ng-message after the user submit the form. However , the message is shown when the form is rendered. It seem like the ng-show is not evaluating.

I printed the field in the expression and it is false when I open the form. Also, I change it to ng-hide but I have the same issue.

Can you please have a look ..

<div class="small-12">
   <label>first name
<span class="field-error"> *</span>
</label>
<input name="firstName" 
  type="text" 
  maxlength="25" 
  ng-disabled="isSubmitting" required 
  ng-model="candidate.firstName" 
  ng-class="{error:isFormSubmitted && contactForm.firstName.$error.required}" />

<div ng-messages="forms.contactForm.firstName.$error" 
    class="errorFormLabel" role='alert'>
   <div ng-message="required" 
    ng-show="isFormSubmitted">This is a required field {{isFormSubmitted}}
  </div>
 </div>
</div>

Answer 1

Think about ng-messages as a switch clause, you can nest the /ng-show/ng-hide inside ng-message directive but not use them together

For example:

<div ng-messages="forms.contactForm.firstName.$error" 
    class="errorFormLabel" role='alert'>
   <div ng-message="required">
      <span ng-show="isFormSubmitted">This is a required field {{isFormSubmitted}}</span>
   </div>
 </div>
</div>

If you don't want an extra element: <span>, try ng-if, basically ng-if has the priority higher than any other angularjs directive and it will force the ng-message directive to be removed from the DOM tree if the expression is not positive.

<div ng-message="required" 
    ng-if="isFormSubmitted">This is a required field {{isFormSubmitted}}
  </div>