ng-messages and ui-mask conflict on second validation

Question

I'm experiencing a tricky problem when using ng-messages and ui-mask. Both are working fine at first glance, when i first check a field it displays the message as it should, but after i correct the problem and then change it to another wrong pattern it will show that the field is invalid, but won't show the message.

  <md-input-container md-no-float class="md-block" flex-gt-sm>
          <label>Mobile*</label>
          <input name="cel" ng-model="newUser.mobile" type="tel" ui-mask="(99) ?99999-9999" ui-mask-placeholder pattern="\([0-9]{2}\) [0-9]{4,6}-[0-9]{3,4}$" required md-maxlength="15" ui-options="{clearOnBlur: false}">
          <div ng-messages="userForm.cel.$error" role="alert" multiple>
            <div ng-message="required" class="my-message">Required Field</div>
            <div ng-message="pattern" class="my-message">Invalid mobile format</div>
          </div>
        </md-input-container>

Just to clarify the scenario:

1- I leave the phone input field in blank 2- It shows the expected message + leaves the field in red (form.error is on) doesn't allowing submission 3- I change the input field to a valid format 4- The message + errors disappears 5- I change the input field to blank again 6- It leaves the field in red (form.error is on) but the message wont appear

I'm using the latest version of ui-mask and ng-message is being included inside angular-material (v1.0.9ˆ)

any thoughts?

EDIT: With further investigation, i realized it had nothing to do with ui-mask, it seems to be a problem ng-messages only. myForm.name.$error is being triggered as 'required' but the div:

  <div ng-message="required" class="my-message">Required Field</div>

wont show.

Answer 1

I found the solution here: angular ng-messages only showing when $touched is true

The code bellow worked for my problem

<md-input-container md-no-float class="md-block" flex-gt-sm>
      <label>Mobile*</label>
      <input name="cel" ng-model="newUser.mobile" type="tel" ui-mask="(99) ?99999-9999" ui-mask-placeholder pattern="\([0-9]{2}\) [0-9]{4,6}-[0-9]{3,4}$" required md-maxlength="15" ui-options="{clearOnBlur: false}">
      <div ng-messages="userForm.cel.$error" role="alert" ng-show="userForm.cel.$touched" multiple>
        <div ng-message="required" class="my-message">Required Field</div>
        <div ng-message="pattern" class="my-message">Invalid mobile format</div>
      </div>
</md-input-container>