ng-Nachrichten und ui-Maske Konflikt bei der zweiten Validierung

Question

Ich habe ein schwieriges Problem bei der Verwendung von ng-Nachrichten und UI-Maske. Beide funktionieren auf den ersten Blick gut, wenn ich zum ersten Mal ein Feld überprüfe, zeigt es die Meldung an, aber nachdem ich das Problem korrigiert habe und es dann in ein anderes falsches Muster geändert habe, wird angezeigt, dass das Feld ungültig ist, aber nicht angezeigt wird die Nachricht.

<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> 

einfach das Szenario zu klären:

1- ich das Telefon Eingabefeld verlassen in leeren 2- Es zeigt die erwartete Nachricht + das Feld in roten Blätter (form.error ist) doesn‘ t Zulassen der Einreichung 3- Ich ändere das Eingabefeld in ein gültiges Format 4- Die Nachricht + Fehler verschwindet 5- Ich ändere das Eingabefeld wieder leer 6- Es lässt das Feld in rot (form.error ist an) aber die Nachricht erscheint nicht

I verwende die neueste Version von UI-Maske und NG-Nachricht wird in Angular-Material (v1.0.9) enthalten

irgendwelche Gedanken?

EDIT: Mit weiterer Untersuchung, erkannte ich, dass es nichts mit UI-Maske zu tun hatte, scheint es ein Problem zu sein, ng-Nachrichten nur. myForm.name. $ -Fehler wird als 'erforderlich' ausgelöst, aber das div:

wird nicht angezeigt.

Answer 1

ich die Lösung hier: angular ng-messages only showing when $touched is true

Der Code unten für mein Problem arbeitete

<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>