Question

在我的回复中，如果我输入无效字段，它会显示来自服务器（节点）的“无效的用户名或密码”消息。但我不知道如何在我的模板中填充它。我尝试了很多例子，但没有一个适合我。如何为它编写服务和控制器？ TIA

模板：

<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>

控制器：

 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

您需要将错误数据从服务器绑定到范围，以便可以在模板中使用它。在你的catch块中尝试：

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

然后在html中，您可以在任何需要的地方绑定该错误消息：

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

如何在AngularJS中绑定错误数据“无效的用户名和密码”和“用户名已存在”

1 个答案: