如何显示从 WebAPI 返回的验证错误？

Question

我正在使用最新版本的 angular.js 和 WebAPI & bootstrap。

想象一下只有几个文本框和提交按钮的表单。用户提交表单后，数据将由服务器上的 WebAPI 调用进行验证，因为我们不能信任客户端验证。

在 API 控制器中，我们进行所有业务验证。假设在所有文本框中输入的数据均无效：

我应该如何 return 来自我的网络的错误消息API 以便表单正确显示它？

在没有 angular 的正常 MVC 方式中，这很容易。我们可以将错误添加到 ModelState，视图将选择它并正确显示错误。

Answer 1

angular 方式 使用带有 angular 指令 ng-valid 的表单。你可以简单地添加它，例如给你的 input:

<input type="text" ng-valid="myFunc()">

您可以在 范围内定义 myFunc()，随心所欲，return 一个布尔值。

现在，只需将 ng-disabled 添加到您的提交按钮并将其绑定到 angular 的表单 $valid 属性:

<button type="submit" ng-disabled="!myForm.$valid">Cool Button</button>

注意：myForm 是您的 form.

的名称

docs 中的更多信息。

Answer 2

AngularJS 已内置表单验证：

WebApi

您可以 return 任何格式的错误。我建议回复应包含以下信息：

描述错误的错误消息
错误发生在请求的哪一部分(Payload, url params, query params)
哪个属性触发了错误（电子邮件、密码...）
响应还应具有正确的错误状态代码（400、401、...）

客户端

假设您的回复如下所示：

{
    "message": "Email is invalid",
    "area": "payload",
    "field": "email"
}

创建您的表单并确保已分配名称属性，因为在您的表单验证中您将需要它。现在 angular 会将表单验证状态附加到您的元素：

<input type="email" name="email" id="email" ng-model="user.email" ng-minlength="6" required />

您现在可以通过访问验证字段动态显示错误消息：

<span ng-show="form.email.$error.required && form.email.$dirty">Email can not be empty</span>

Answer 3

我的解决方案是：只是我需要改变两件事 1) 获取数据和 2) 小写属性 modelState.

parseErrors(response.data)

function parseErrors(response) {
        var errors = [];
        for (var key in response.modelState) {
            for (var i = 0; i < response.modelState[key].length; i++) {
                errors.push(response.modelState[key][i]);
            }
        }
        return errors;
    }

如何显示从 WebAPI 返回的验证错误？

How do you show validation errors returned from WebAPI?

asp.net-web-api

angularjs