在客户端上使用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来处理.

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