Ich füge Validierung der Benutzerregistrierungsseite in meiner App hinzu und ich versuche ngMessages
und die eingebaute angularjs-Validierung zu verwenden.angularjs - ngMessages und Validierung funktioniert nicht wie erwartet
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
Danke für das obige Beispiel, ich werde das im Hinterkopf behalten. Aber haben Sie eine Vorstellung davon, warum die standardmäßige Einbaumethode nicht richtig funktioniert? – Nick
Ich aktualisierte meine Antwort mit einer Lösung wie du es getan hast. Der einzige Unterschied besteht einfach darin, die Regexp im Controller zu bilden und diese an das 'ng-Muster 'zu binden. Auch meine Regexp ist ein wenig anders. – thepio
Danke für das Update, aber wenn ich 'a' als Passwort und 'a' als Bestätigung eingeben, ist die Nachricht immer noch so wie es war vor – Nick