Ich versuche die Formularüberprüfung für ein E-Mail-Feld zu implementieren. Validierung sollte Folgendes tun:
Ich möchte, dass die erste Nachricht erscheint, wenn das Feld leer ist, erscheint die zweite Nachricht, wenn die E-Mail ungültig ist und die dritte Nachricht erscheint, wenn die E-Mail-Adresse gefunden wird und daher nicht einzeln ist.
Das funktioniert, wenn ich nur mit dem "required" -Attribut versuche, aber sobald ich mein per E-Mail verfügbares Direktivenattribut hinzufüge, prüft es nicht mehr das Format der E-Mail und die E-Mail-verfügbare Direktive wird zusammen mit dem Erforderlichen ausgeführt Attribut. Beide Nachrichten erscheinen, aber ich möchte nur, dass der Benutzer jeweils eine Nachricht sieht.
Ich benutze angularjs 1.1.3.
Kann mir jemand sagen, was ich falsch machen könnte?
HTML
%Vor%Richtlinie
%Vor%Ich sehe, Sie haben Ihr eigenes Problem bereits gelöst, aber ich denke, ich kann Ihnen hier (hoffentlich) einige Tipps / Ratschläge geben:
1) Alles was Sie tun mussten, um sicherzustellen, dass Ihr Validator ausgeführt wurde nachdem die integrierten Winkelvalidatoren push() it auf ctrl.$parsers statt unshift() it waren.
2) Um zu verhindern, dass Ihr Validator aufgrund der zuvor ausgeführten Validatoren ausgeführt wird, die dessen ungültigen Wert anzeigen (d. h. wenn Sie den Ajax-Aufruf nicht durchführen möchten, wenn das Feld bereits ungültig ist). Sie müssen nur ctrl.$invalid in einer if -Anweisung in Ihrem Validator überprüfen.
3) Sie möchten Ihr Formular mit einem separaten Aufruf von $setValidity() ungültig machen, bevor Sie Ihren Ajax-Anruf starten und nachdem dieser empfangen wurde. Auf diese Weise ist Ihr Formular ungültig, bis AJAX zurückkehrt und sagt, ob es gültig ist oder nicht.
4) Dies ist wahrscheinlich geringfügig, aber wenn Sie nicht auch ctrl.$formatter hinzufügen, werden Werte, die anfänglich Ihrem Objekt in $ scope zugewiesen wurden, nicht validiert, bevor sie auf den Bildschirm geschrieben werden. Dies kann ein Problem darstellen, wenn Ihr Formular dynamisch über routing, ng-repeat oder ng-include mit Daten, die bereits ausgefüllt sind, dem Bildschirm hinzugefügt wird. Im Allgemeinen sollten alle Validatoren eine $ Parser-Komponente (Ansicht - & gt; -Modell) und eine $ Formatierungskomponente (Modell - & gt; Ansicht) haben.
5) Ein Wort der Vorsicht. Die meisten Validatoren entfernen den Wert vollständig aus dem Modell, wenn es ungültig ist. Weil Sie einen asynchronen Aufruf durchführen, müssen Sie den viewValue sofort in Ihrer Parser-Funktion zurückgeben. Normalerweise gibt die Parser-Funktion undefined zurück, wenn das Feld ungültig ist, was verhindert, dass ungültige Daten in Ihrem Modell sind.
6) Da die Validatoren einen Zustand haben, der in Ihrem $ error-Objekt verwaltet wird, möchten Sie es löschen, wenn dieser asynchrone Validator anfänglich getroffen wird. Siehe unten.
7) Seite Hinweis: In Ihrer Antwort habe ich festgestellt, dass Sie Werte in Ihren Ajax-Antworthandlern zurückgeben ... das wird nichts für Sie tun. Da der Aufruf asynchron ist, kehren Sie von diesem Parser immer undefiniert zurück. Aktualisiert es dein Modell? Ich wäre überrascht, wenn es so wäre.
So hätte ich Ihre ursprüngliche Anweisung geändert, damit sie so funktioniert, wie Sie es wahrscheinlich möchten:
%Vor%Und ... natürlich ist hier ein Plünderer, der alles demonstriert
Ich habe es gelöst, indem ich das erforderliche Attribut entfernt und eine zweite Anweisung namens email-valid hinzugefügt habe. Außerdem habe ich die setValidity-Methode in der else-Klausel der emailAvailable-Direktive entfernt.
HTML
%Vor%Richtlinien
%Vor%Tags und Links angularjs angularjs-directive