Question

我正在使用最新版本的angular.js和WebAPI＆amp;自举。

想象一下几乎没有文本框的表单。提交按钮。一旦用户提交表单，数据将由服务器上的WebAPI调用验证，因为我们无法信任客户端验证。

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

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

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

Answer 1

AngularJS内置了表单验证：

<强>的WebAPI

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

描述错误的错误消息
请求中发生错误的部分（Payload，url params，query params）
哪个属性触发了错误（电子邮件，密码，...）
响应还应具有正确的错误状态代码（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>

Answer 2

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

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

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

现在，只需将ng-disabled添加到您的提交按钮，然后将其绑定到有角度的$valid属性：

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

注意： myForm 是form的名称。

docs中的更多信息。

Answer 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;
    }

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

3 个答案: