angular select $ berührte Validierung

8

Ich habe ein Formular mit select und eine Schaltfläche, die aktiviert wird, wenn das Formular validiert wird. Es funktioniert gut mit Eingabefeld. Es scheint jedoch, dass das berührte $ nicht richtig für die Auswahl funktioniert. Die Schaltfläche ist aktiviert, auch wenn die Auswahl berührt wird. Es sollte ungültig werden, wenn select berührt wird. Es wird nur ungültig und die Schaltfläche ist deaktiviert, wenn ich eine Option auswähle und dann den Standardwert auswähle. Ich möchte, dass es funktioniert, wenn Auswahl berührt wird und benutze den Mauszeiger weg. Hier ist mein HTML:

%Vor%

Hier ist mein Controller:

%Vor%     
Gantavya 20.03.2015, 21:38
quelle

2 Antworten

4

Ich hatte vor einer kurzen Zeit das gleiche Problem. Ich löste es, indem ich ein paar Dinge zum Auswahlfeld hinzufügte und einen weiteren Eintrag zum Array der möglichen Auswahlen hinzufügte.

Zuerst möchten Sie eine leere oder ungültige Auswahl zur Liste der möglichen Auswahlen hinzufügen, der beste Platz ist im [0] -Slot und Sie werden sehen, warum weiter unten.

%Vor%

Als nächstes müssen Sie einige Angular Direktiven für Ihr Auswahlfeld hinzufügen und aktualisieren. Du willst das ng-valid sagen Angular was hier akzeptabel ist. Sie müssen außerdem angeben, dass Sie das Feld mit einem Wert "Wählen Sie einen anderen Wert" starten und dass es nicht gültig ist, damit dieser Wert während der Übergabe ausgewählt wird. Das Hinzufügen eines Namens und einer ID sind in der Regel Best-Practice-Elemente. Das letzte hinzuzufügende Bit ist die ng-required-Anweisung, da Sie novalidate für das Formular verwendet haben. Dieses Formularelement muss jedoch zu einem gültigen Wert geändert werden. Das Endergebnis ist unten:

%Vor%

Dies wurde auch aktualisiert, um die einfachste Implementierung zu veranschaulichen (da Sie 0-4 als Schlüssel verwenden, brauchen Sie sie nicht wirklich, verwenden Sie einfach ein einfaches Array). Ich habe auch Ihren Code so geändert, dass er mit John Papas Best Practices übereinstimmt und in einem roten Stern (für ungültige Auswahlen) und einem Grün hinzugefügt wurde Häkchen (für eine korrekte Auswahl), wie auch eine andere gute Praxis (Erfolg und Misserfolg zeigen) bei nicht englischsprachigen Benutzern.

Sie brauchen auch nicht die Startoption, die Sie ursprünglich angegeben haben, da meine Updates das gut behandeln.

Auf Anfrage, hier ist ein Plunker .

Ich hoffe, das hilft.

-C§

    
CSS 30.07.2015 19:53
quelle
2

Ich habe diese Geige erfunden und alles scheint gut zu funktionieren.

%Vor%

Ich habe den Verdacht, dass das $touched event nicht das ist, was Sie denken.

Bitte geben Sie mir ein Feedback, wenn ich falsch liege!

    
Kutyel 06.08.2015 12:18
quelle

Tags und Links