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

【问题标题】：How do you show validation errors returned from WebAPI?你如何显示从 WebAPI 返回的验证错误？
【发布时间】：2015-02-04 15:09:35
【问题描述】：

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

想象一个带有几个文本框和提交按钮的表单。一旦用户提交表单，数据就会通过服务器上的 WebAPI 调用进行验证，因为我们无法信任客户端验证。

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

我应该如何从我的 WebAPI 返回错误消息，以便表单正确显示？

在没有角度的普通 MVC 方式中，这很容易。我们可以向 ModelState 添加错误，视图会选择它并正确显示错误。

【问题讨论】：

标签： angularjs asp.net-web-api

【解决方案1】：

AngularJS 内置了表单验证：

WebApi

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

描述错误的错误消息
错误发生在请求的哪一部分（负载、url 参数、查询参数）
哪个属性触发了错误（电子邮件、密码……）
响应还应具有正确的错误状态代码（400、401、...）

客户

假设您的回复如下所示：

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

创建您的表单并确保已分配 name 属性，因为在您的表单验证中您将需要它。现在 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>

【讨论】：

所以 "field": "ELEMENT ID HERE" ?
不是id，id是视图特定的，它取决于服务器在reuqest中得到了什么。例如，在登录请求中，您将在帖子正文中发送电子邮件和密码。错误响应对象字段将是“电子邮件”。
好的。但是在我从服务器发送错误后，如何更新 UI 以突出显示错误？

【解决方案2】：

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

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

您可以在您的范围内定义myFunc()，做任何您喜欢的事情并返回一个布尔值。

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

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

注意：myForm 是您的form 的名称。

更多信息见docs。

【讨论】：

这就是我要找的：当我们将 ViewModel 从客户端发送到服务器（在我的例子中是 WebAPI）时，我的 WebAPI 应该返回什么（错误列表？）以便我可以突出显示页面上的错误处于控制级别。
如果您使用 Promise 进行 AJAX 调用，您可以在 .error() 函数中返回 false。

【解决方案3】：

我的解决方案是：https://stackoverflow.com/a/23087715/3290276 只是我需要更改两件事 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;
    }

【讨论】：