angularjs - ngMessages und Validierung funktioniert nicht wie erwartet

Question

Ich füge Validierung der Benutzerregistrierungsseite in meiner App hinzu und ich versuche ngMessages und die eingebaute angularjs-Validierung zu verwenden.

Ich habe merkwürdiges Verhalten für den Kennwortabgleich und mit Mustern im Allgemeinen.

Hier ist der Code für die Passwort-Matching:

<span>Password (6 to 16 character)</span> 
      <span class="item item-input"> 
        <input type="password" 
          ng-model="userRegistration.password" 
          placeholder="password" 
          name="password" 
          ng-minlength="6" 
          ng-maxlength="16" 
          required 
          ng-class="{'invalid-input': userRegistrationForm.password.$touched && userRegistrationForm.password.$invalid }"> 
       </span> 
      <!-- Form validation messages --> 
      <div role="alert" class="error-message" ng-messages="userRegistrationForm.password.$error" ng-show="userRegistrationForm.password.$touched"> 
      <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> 
      </div> 
      <span>Confirm Password</span> 
      <span class="item item-input"> 
        <input type="password" 
          placeholder="confirm password" 
          ng-model="userRegistration.passwordConfirmation" 
          name="confpass" 
          ng-minlength="6" 
          ng-maxlength="16" 
          ng-pattern="/^{{userRegistration.password}}$/" 
          required 
          ng-class="{'invalid-input': userRegistrationForm.confpass.$touched && userRegistrationForm.confpass.$invalid }"> 
       </span> 
      <!-- Form validation messages --> 
      <div role="alert" class="error-message" ng-messages="userRegistrationForm.confpass.$error" ng-show="userRegistrationForm.confpass.$touched"> 
      <p ng-message="required">This field is required</p> 
      <p ng-message="pattern">Password not matching!</p> 
      </div> 

Das Problem ist, dass selbst wenn das Passwort übereinstimmt, der Fehler bleibt dort displayng, dass es nicht passend, und ich kann nicht herausfinden, warum es dies zu tun.

<span>System ID</span> 
      <span class="item item-input"> 
        <input type="text" 
          ng-model="userRegistration.id" 
          placeholder="system id" 
          name="systemID" 
          ng-minlength="6" 
          ng-maxlength="6" 
          pattern="/:/" 
          required 
          ng-class="{'invalid-input': userRegistrationForm.systemID.$touched && userRegistrationForm.systemID.$invalid }"> 
       </span> 
      <!-- Form validation messages --> 
      <div role="alert" class="error-message" ng-messages="userRegistrationForm.systemID.$error" ng-show="userRegistrationForm.systemID.$touched"> 
      <p ng-message="required">This field is required</p> 
      <p ng-message="pattern">Colons not required!</p> 
      <p ng-message="minlength">This field is too short</p> 
      <p ng-message="maxlength">This field is too long</p> 
      </div> 

I werden müssen überprüfen, ob Doppelpunkte in der Eingabe und Anzeige und Fehler hinzugefügt, wenn sie:

Ein weiteres Beispiel für Muster im Code nicht wie erwartet verhalten können Sie unten. Das Problem, wie oben, ist, dass, selbst wenn Doppelpunkte nicht da sind, die Nachricht immer noch angezeigt wird.

Was fehlt mir? Ich verwende eindeutig ng-pattern und ng-messages falsch, kann aber nicht verstehen, warum.

Jede Hilfe würde wirklich geschätzt werden.

Codepen mit beiden Beispielen hier: http://codepen.io/NickHG/pen/NNZYwK?editors=1010

Dank

Answer 1

benutzte ich ein wenig anders Ansatz, um dies mit ng-Meldungen zur Arbeit zu kommen. Ich habe eine benutzerdefinierte Richtlinie wie folgt aus:

.directive('compareTo', function() { 
    return { 
    require: "ngModel", 
    scope: { 
     otherModelValue: "=compareTo" 
    }, 
    link: function(scope, element, attributes, ngModel) { 

     ngModel.$validators.compareTo = function(modelValue) { 
     return modelValue == scope.otherModelValue; 
     }; 

     scope.$watch("otherModelValue", function() { 
     ngModel.$validate(); 
     }); 
    } 
    }; 

}); 

und Anzeige der Fehler damit wie folgt aus:

<div role="alert" class="error-message" 
ng-messages="userRegistrationForm.conf.$error" 
ng-show="userRegistrationForm.conf.$touched"> 
    <p ng-message="required">This field is required</p> 
    <p ng-message="compareTo">Password not matching!</p> 
</div> 

Für weitere Informationen und eine Demo bitte auf den Link unten sehen.

Codepen Demo: http://codepen.io/thepio/pen/rLNBWr?editors=1010

EDIT basierend auf Kommentar:

Hier ist ein Beispiel mit ng-Muster unter Verwendung von (keine Richtlinie erforderlich): http://codepen.io/thepio/pen/zBYOPy?editors=1010

ich eine ng-change Funktion, um Ihre erste Eingabe und setzen Sie eine Regexp in der Steuerung, wenn es geändert wird. Dann binde ich es an den ng-pattern des Bestätigungs-Eingangs und zeige den ng-messages entsprechend an.