Überprüfen Sie die Eingabe für das Änderungsereignis des SELECT-Elements erneut
Ich schreibe eine AngularJS-App und in dieser App gibt es ein Domain-Management-Tool. Wenn eine Domäne ausgewählt ist, erzeuge ich die Domänenaufzeichnungen in einer Tabelle und lasse den Benutzer jede Zeile bearbeiten. Da die Felder dynamisch erstellt werden, verwende ich ng-form, um die einzelnen Zeilen einzeln zu validieren, da sie denselben Namen haben.
Jeder Domäneneintrag hat ein Inhaltsfeld, in dem sich eine IP, ein CNAME oder ein solcher befindet. Ich validiere dieses Feld unter Verwendung eines Regex-Musters, das von einer Funktion basierend darauf erzeugt wird, welcher Datensatztyp ausgewählt ist (A, CNAME, TXT, etc.).
Das Problem ist, dass, wenn ich zB einen A-Datensatz bearbeite, der Datensatztyp in CNAME geändert wird, das Formular immer noch gültig erscheint, da keine neue Validierung des Inhaltsfeldes durchgeführt wurde. Die einzige Möglichkeit für mich, es erneut zu validieren, besteht darin, mit der Eingabe in das Inhaltsfeld zu beginnen, was dann gut funktioniert.
Überprüfen Sie die Bilder unten:
Ich drücke Bearbeiten auf der A-Aufnahme und alles sieht gut aus:
Ich ändere den Datensatztyp in CNAME und das Formular erscheint immer noch gültig, obwohl sich die Regex geändert hat. Wenn ich den Typ ändere, möchte ich den Inhalt (1.2.3.4) erneut validieren, da es sich um einen neuen Regex handelt:
Ich fange an, in das Inhaltsfeld einzutippen und jetzt wird das Formular korrekt ungültig. Ich möchte, dass dies passiert, wenn ich den Datensatztyp ändere, nicht nur, wenn ich wieder tippe:
Wie kann ich das Eingabefeld erneut validieren, wenn ich das Dropdown-Menü ändere?
Plunker-Beispiel: Ссылка Hinweis! Kleiner Fehler, der den A-Eintrag in der ersten Zeile nicht anzeigt. Sie können das Problem immer noch wie in den obigen Bildern testen.
Aktualisierung mit der benutzerdefinierten Thomas-Anweisung
Vor dem Ablegen des Dropdown-Menüs
Nach dem Ändern der ersten Dropdown-Liste von A nach CNAME werden alle Inhaltsfelder gelöscht
Speichern Schaltfläche aktualisieren
%Vor%Letzte Aktualisierung .. ungerades Verhalten in Bezug auf das kompilierte Element
Ich drücke Bearbeiten und es geht in meine normale Bearbeitungsansicht
Ich fange an, eine neue IP-Adresse einzugeben, bis sie gültig wird
Wenn ich den Inhalt ungültig mache, nachdem er einmal gültig ist, wie das Hinzufügen eines Punkts, wird der Wert gelöscht. Warum?
Aktuelle Direktive basierend auf Thomas Code:
%Vor%Ich wähle jetzt das tatsächliche Feld aus und ändere die Klasse, um sie ungültig zu machen, wenn die Regex nicht übereinstimmt. Auf diese Weise wird auch die Schaltfläche Speichern ungültig. Dies funktioniert, wenn Sie in der Dropdown-Liste ändern, aber es kompromittiert das kompilierte Element irgendwie.
4 Antworten
Das können Sie mit einer Anweisung im Dropdown-Menü tun:
%Vor%In dieser Anweisung sehen Sie den Wert des Modells für das Dropdown-Menü oder das Element, das die Anweisung übernimmt.
Wenn der Wert geändert wird, nimmt die Anweisung den Wert der Eingabe an und überprüft, ob dieser Wert mit dem in Ihrem Controller definierten regEx-Muster übereinstimmt. Wenn nicht, rufen Sie die $ compile-Methode auf, um das ng-disabled-Attribut auf die submit-Schaltfläche zu setzen.
Das Gültige ist wieder da.
Sehen Sie sich die Dokumentation an, um das $ compile in Details zu verstehen: Ссылка
Ich hoffe, es hilft, wenn Sie mehr Hilfe brauchen, fragen Sie es :) Ich werde Ihnen gerne wieder helfen;)!
Glückliche Kodierung
UPDATE:
Ok, wenn Sie Ihre Eingabe kompilieren, geht der Wert der Eingabe verloren, weil der Wert noch nicht persost auf dem Bereich ist ...
Um den Wert Ihrer Eingabe beizubehalten, wenn Sie $ kompilieren, machen Sie das so:
%Vor%Hier haben Sie den Wert Ihrer Eingabe in der "value" var und dann nach dem $ compile machen Sie ein $ timeout mit einer Verzögerung von 0.
In diesem $ timeout (das ein Versprechen zurückgibt --- & gt; Der asynchrone mächtige XD) setzt du den Wert deiner Eingabe zurück und voila !!
Ich denke, die Lösung wäre, das "record.type" -Modell zu betrachten und bei Änderung davon die neue Regex-Validierung auszulösen. Aber um das zu tun, hat das Modell "record.content" eine Änderung erfahren, die Sie durch Code durchführen können.
Tags und Links javascript angularjs