Server-side validation form Angular.js

Question

Server-side validation form Angular.js

The default-validation for the form I have works as expected. But when a user types in a valid email address and a password of three characters minimum, that doesn't mean the login credentials are valid.

So my question is how can I set the model 'email' and 'password' to invalid after server-side validation, so the input-fields get the class ng-invalid instead of ng-valid.

My current 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( '/' );
      }
    });
  };
}

Any help is welcome and really appreciated. Thanks in advance!

javascript
angularjs

Answer 1

Tosh shimayama gave the right answer. $setValidity is a method from the NgModelController and takes two parameters: validationErrorKey and isValid.

More information on $setValidity

Change the validity state, and notifies the form when the control changes validity. (i.e. it does not notify form if given validator is already marked as invalid).

Source and further information AngularJS: NgModelController

Answer 2

Client-side validation is quick, but it is easy to break, using for example - firebug. You can stick with only server-side validation. Validate everything on server and return BODY with list of keys and error messages. Angular allows you to send data to server asynchronously, end user will see it as client-side validation, as there was no visible post-back.

See this example, try to click 'Save', and see error messages: upida.cloudapp.net:8080/org.upida.example.angular/order/create?clientId=1

You can download it: upida.codeplex.com

Answer 3

Here is a nice validation directive that might be usefull https://groups.google.com/forum/#!msg/angular/6v-AillQboI/D0OaZzV7Me0J

Answer 4

I done something but its rails specific, maybe it could give someone an idea, or push in the right direction https://github.com/fmatosic/bubblemevalid