Binden von Fehlerdaten "Ungültiger Benutzername und Passwort" und "Benutzername existiert bereits" in AngularJS

Question

In meiner Antwort zeigt es eine "Ungültiger Benutzername oder Passwort" -Nachricht, die vom Server (Knoten) kommt, wenn ich ungültige Felder eingib. Aber ich weiß nicht, wie ich das in meine Vorlage einfügen soll. Ich habe viele Beispiele ausprobiert, aber keiner von ihnen hat für mich funktioniert. Wie schreibe ich Dienste und Controller dafür? TIA

Vorlage:

<div ng-if="messages.error" role="alert" class="alert alert-danger"> 
    <div ng-repeat="error in messages.error">{{error.msg}}</div> 
</div> 
<form name="frmRegister" ng-submit="login()" role="form"> 
    <legend>Log In</legend> 
    <div class="form-group" ng-class="{ 'has-error': frmRegister.email.$dirty && frmRegister.email.$error.required }"> 
     <label for="email">Email</label> 
     <input type="email" name="email" id="email" placeholder="Email" class="form-control" ng-model="user.email" required> 
     <span ng-show="frmRegister.email.$dirty && frmRegister.email.$error.required" class="help-block">Email is required</span> 
    </div> 

    <div class="form-group" ng-class="{ 'has-error': frmRegister.password.$dirty && frmRegister.password.$error.required }"> 
     <label for="password">Password</label> 
     <input type="password" name="password" id="password" placeholder="Password" class="form-control" ng-model="user.password" 
      required> 
     <span ng-show="frmRegister.password.$dirty && frmRegister.password.$error.required" class="help-block">Password is required</span> 
    </div> 
    <button type="submit" id="submit" class="btn btn-success">Log in</button> 
</form> 

Controller:

angular.module('MyApp') 
      .controller('LoginCtrl', function($scope,$rootScope, $location, $auth, toastr, $http) { 
       $scope.login = function() { 
        $http ({ 
         method : 'POST', 
         url: 'http://localhost:3000/onio/v1/login', 
         data : $scope.user 
        }); 
        $auth.login($scope.user) 
         .then(function() { 
          toastr.success('You have successfully signed in!'); 
          $location.path('/'); 
         }) 
         .catch(function(error) { 
          toastr.error(error.data.message, error.status); 
         }); 
       }; 
       $scope.authenticate = function(provider) { 
        $auth.authenticate(provider) 
         .then(function() { 
          $rootScope.currentUser = response.data.user; 
          toastr.success('You have successfully signed in with ' + provider + '!'); 
          $location.path('/'); 
         }) 
         .catch(function(error) { 
          if (error.message) { 
           // Satellizer promise reject error. 
           toastr.error(error.message); 
          } else if (error.data) { 
           // HTTP response error from server 
           toastr.error(error.data.message, error.status); 
          } else { 
           toastr.error(error); 
          } 
         }); 
       }; 
    }); 

Answer 1

Sie müssen die Fehlerdaten vom Server an Ihren Umfang binden, so kann es in der Vorlage verwendet werden. In Ihrem catch-Block versuchen:

.catch(function(error) { 
    $scope.error_message = error.data.message 
    toastr.error(error.data.message, error.status); 
}); 

dann in den HTML-Code, können Sie diese Fehlermeldung binden, wo Sie es brauchen:

<div ng-if="error_message" role="alert" class="alert alert-danger"> 
    <div>{{error_message}}</div> 
</div>