在客户端使用 Angular 进行服务器端表单验证

Question

我目前有一个项目，我正在将客户端的东西转换为 Angular，因为我喜欢它的绑定方面。目前，我正在服务器上进行表单验证。在客户端和服务器上做了多年之后，我发现我的偏好是通过对服务器的 AJAX 请求来完成。因此，设计上没有客户端表单验证。

这是一种享受，我可以使用 jQuery 来点亮表单，其中包含 ModelState 中的任何验证错误，这些错误会以 json 的形式发送回客户端。

现在是 Angular。我想保留这个实现，但我觉得我正在与技术作斗争。 Angular 似乎坚持客户端验证。

有没有办法在收到带有验证错误的 AJAX 响应时，告诉 Angular 验证机制什么是无效的，这样我仍然可以只使用服务器端验证？

编辑 我应该包含一个帖子的链接，我的实现基于该帖子 - http://timgthomas.com/2013/09/simplify-client-side-validation-by-adding-a-server/ 如您所见，它不使用 Angular。将它的服务器端方面并让它与 AngularJs 一起工作会很好

谢谢

Answer 1

这是一种方法，具体取决于您愿意在当前代码中更改多少并假设一些事情。

让你有这样的表格

<form name="form" novalidate ng-submit="update(form)">
    <input type="text" ng-model="Input" name="Input"/>
    <button type="submit">Save</button>
</form>

那么你的更新函数应该是这样的

function update(form) {
    testResource.save($scope.Input)
        .$promise
        .then(function (response) {
            console.log("Success");
        })
        .catch(function (response) {
            console.log("fail");
            for (var i = 0; i < response.data.length; i++) {
                form[response.data[i].Name].$setValidity(response.data[i].Error, false);
            }
        });
}

失败响应中的数据将是这样的结构

[{ Name: "Input", Error: "required" }];

这应该允许您在服务器上进行所有验证并将其传递给 Angular 进行处理。

更详细一点，在提交功能上，您将角度表单发送到控制器，然后当角度资源得到错误响应时，您将错误添加到有错误的表单属性。这意味着您输入的名称必须与您从错误响应中传递的名称相同。