Question

我正在尝试在Angular中找到最好的方法来使表单无效，这不是由于特定元素，而是由于通过AJAX提交后的系统级错误。例如，您可以输入有效的电子邮件和密码（两个良好的字符串），按提交，并发现存在系统错误，应该触发表单上的一般错误消息。由于这与数据模型中的任何内容无关，我通常称之为“无效”形式的最佳方式是什么？

<form name="loginForm" class="loginForm" ng-submit="loginSubmit(loginForm)">
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" name="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" ng-model="login.email" required>
        <span class="error" ng-show="loginSubmit.email.$error">Required!</span><br>
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="login.password" minlength="8" required>
    </div>
    <button type="submit" class="btn btn-default">Log In</button>
</form>

和...

    ngModule.controller('LoginController', function($scope, $location) {

        $scope['login'] = {};

        $scope['loginSubmit'] = function(form) {

            var loginPromise = myAsyncLoginFuncYouCanAssumeWorks();

            loginPromise.done(function(){

                $location.path('/');

            });

            loginPromise.fail(function() {

                //how best to trigger a generic error in the form here?

            });

        };

    });

正如您所看到的，我想在提交后触发一些表单范围的错误状态。它真的可以像在表单中添加一个无效的表单类一样简单，但同样，我想知道最纯粹的Angular方法。

Answer 1

使用您的一般错误向表单添加标签，该错误在发生错误时显示范围变量为true：

<div class="alert alert-danger" role="alert" ng-show="loginError">There was an error with your login details. Please check them and try again</div>

然后当你的承诺失败时：

loginPromise.fail(function () {
    $scope.loginError = true;
});

如果您有许多系统消息将它们全部抽象到一个单独的服务中，那么也许可能会很好，这样您就可以将systemmessages服务注入您的控制器，然后简单地绑定：

<div class="alert alert-danger" role="alert" ng-show="loginError">{{ systemMessages.loginError }}</div>

或者，当您使用Bootstrap时，可能会注入$modal service并在弹出窗口中显示错误消息。

确保您尝试使用存储在localatorage中的持有者令牌与持久性cookie相对，这也很重要，因此在每次请求时都不会将其发送到服务器。
防伪令牌对SPA也非常有用。

Answer 2

您的服务器可能会使用错误密钥或错误代码返回某种排序或错误的工资负载。

{errors:[{key:"invalid.password"}]}

将错误响应分配给您的范围：

loginPromise.fail(function(response) {
    $scope.errors = response.data;
});

接下来，添加过滤器以将错误密钥/代码转换为错误消息：

angular.module('mtApp').filter('errorFilter', function() {
    return function(e) {
        if (e === 'invalid.password') {
            return 'Invalid password, please try again.';
        }
    };
});

最后，将适当的错误显示为列表：

<div ng-show="errors">
    <ul>
       <li ng-repeat="e in errors">{{e.key | errorFilter}}</li>
    </ul>
</div>

可选地，您可以将相同的“$ scope.erros”对象重新组合到ng-class中，并控制每个字段的CSS有错误。

通过AJAX提交后，在表单上显示系统错误

2 个答案: