Server-side validation for form

Question

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

Totally unrelated, but I set status code to 400 when my AJAX calls return errors. This way you don't need to check or set data.success but instead just handle errors in the error callback. — DanH

ndequeker ndequeker · Accepted Answer · 2012-08-29T09:24:25

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

Server-side validation for form

4 Answers