2012-08-28 12 views
13

Die Standardvalidierung für das Formular Ich habe wie erwartet funktioniert. Wenn ein Benutzer jedoch eine gültige E-Mail-Adresse und ein Passwort mit mindestens drei Zeichen eingibt, bedeutet dies nicht, dass die Anmeldedaten gültig sind.Serverseitige Validierungsform Angular.js

Also meine Frage ist, wie kann ich das Modell gesetzt ‚E-Mail‘ und ‚Passwort‘ ungültiger nach serverseitige Validierung, so dass die Eingabe-Felder erhalten die Klasse ng-ungültig statt ng- gültig.

Mein aktueller Code:

function IndexCtrl($scope, $http) 
{ 
    $scope.form = {}; 
    $scope.submitLogin = function() 
    { 
    $http.post('/api/auth/login', $scope.form).success(function(data) 
    { 
     if (!data.success) 
     { 
     $scope.form.errors = [ data ]; 

     // here I also want to mark the models 'email' and 'password' as invalid, so they both get the class 'ng-invalid' 
     } 
     else 
     { 
     $location.path('/'); 
     } 
    }); 
    }; 
} 

Jede Hilfe ist willkommen und wirklich zu schätzen. Danke im Voraus!

+4

Können Sie einfach $ setValidity Methode verwenden? – Tosh

+2

Völlig nicht verwandt, aber ich setze Statuscode auf 400, wenn mein AJAX-Aufruf Fehler zurückgibt. Auf diese Weise müssen Sie "data.success" nicht überprüfen oder setzen, sondern nur Fehler im Fehlerrückruf behandeln. – DanH

Antwort

5

Tosh shimayama gab die richtige Antwort. $ setValidity ist eine Methode aus dem NgModelController und nimmt zwei Parameter: validationErrorKey und isValid.

Mehr Informationen über $ setValidity

Ändern Sie den Gültigkeitszustand und benachrichtigt die Form, wenn die Steuer Änderungen Gültigkeit. (d. h. es meldet das Formular nicht, wenn der Validator bereits als ungültig markiert ist).

Quelle und weitere Informationen AngularJS: NgModelController

3

Client-seitige Validierung ist schnell, aber es ist einfach zu brechen, mit zum Beispiel - Firebug. Sie können nur bei der serverseitigen Validierung bleiben. Validiere alles auf dem Server und gebe BODY mit einer Liste von Schlüsseln und Fehlermeldungen zurück. Angular ermöglicht es Ihnen, Daten asynchron an den Server zu senden. Der Endanwender sieht dies als clientseitige Validierung, da kein Post-Back sichtbar war.

diesem Beispiel sehen, versuchen Sie auf ‚Speichern‘ klicken, und Fehlermeldungen angezeigt: upida.cloudapp.net:8080/org.upida.example.angular/order/create?clientId=1

Sie können es herunterladen: upida.codeplex.com