Question

在我看来，我有一个登录表单。提交后，我在控制器中定义的范围上调用登录方法。从这个方法我调用一个服务来做实际的登录过程。 service方法返回一个promise。

angular.module('auth').service('authService', ['$q', function($q) {
    this.login = function(credentials) {
        var deferred = $q.defer();

        // Do stuff and resolve or reject promise

        return deferred.promise;
    };
}]);

angular.module('auth').controller('authCtrl'), ['authService', function(authService) {
    $scope.login = function() {
        authService.login(credentials).then(
            function(res) {
                // Successfully logged in
            },
            function(res) {
                // Report error to view
            });
    };
}]);

如何将我的错误（由承诺拒绝返回）传递给我的视图？具体到我的表单的特定（或所有）输入字段的ngModelController。

Answer 1

将错误消息添加到范围，并绑定到视图中的错误消息。

angular.module('auth').controller('authCtrl'), ['authService', function(authService) {
        $scope.errorMessage;
        $scope.login = function() {
        authService.login(credentials).then(
            function(res) {
            // Successfully logged in
            },
            function(res) {
               $scope.errorMessage = res;
            });
};
}]);

并在视图中显示：

<p>{{errorMessage}}</p>

当然，你可以使这更复杂，但这给出了一般方法的想法。

Answer 2

我没有代码形式的具体答案，但我认为您可以访问控制器中提交的表单，解析您的错误，并将其应用到相应的字段。

您可以通过编程方式在表单中的项目上调用$ setValidity（reason，flag），我认为这就是您所追求的。 angular docs显示可用的方法。

所以你会做类似

的事情

// on error
function(res) {
  if (res.error === 'User exists') {
     $scope.loginForm.user.$setValidity('User is taken',false);
  }
}

当然，这要求您可以在UI中根据服务器响应确定哪个字段是问题 - 如果要显示适合该字段的消息。

Answer 3

当然，您也希望在服务器上进行验证，这是不言而喻的。但是，理想情况下，您将独立于发布表单执行表单验证 - 这将提供更好的用户体验。在这个特定的场景中，我没有看到服务器端发生什么类型的验证。您正在验证用户。据推测，他们的证书是必需的。可能，您可能需要格式验证程序以确保它们使用的是电子邮件地址或其他内容。除此之外，显示错误很有用，例如401 ......如果用户输入了错误的凭据，您就知道了。请注意，无效凭据与无效表单不同。尽管如此，可以执行必要的服务器端验证的一种方法是使用自定义验证器：

app.directive('myCustomValidator', ['$http', function($http) {
  return {
    require: 'ngModel',
    link: function(scope, el, attrs, ctrl) {
      $http({
          method: 'POST',
          url: '/api/validateSomething/',
          data: {'value': el.val()}
        }).success(function(data, status, headers, cfg) {
          ctrl.$setValidity('myValidationKey', data.isValid);
        }).error(function(data, status, headers, cfg) {
          ctrl.$setValidity('myValidationKey', false);
      });
    }
  }
}]);

此代码并非包罗万象，我没有测试它，但希望它能让您了解一种方法。

如何从控制器通知有关错误的视图

3 个答案: