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来处理。

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

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

1 个答案: