Question

我的问题类似于Form Validation with Dependent Fields in AngularJS，但验证必须在服务器端使用 Ajax 完成。

我有两个字段城市和邮政编码，并希望使用后端服务来判断两个字段是否匹配。
后端服务已经实现。所以现在我正在尝试将服务与angular集成。

有什么建议吗？

Answer 1

从angular-ui看一下ui-validate。你可以使用ui-validate和函数调用返回promise

所以你的HTML将是

      <input type="text" ng-model="city" ui-validate=" 'doMatch($value, postal)' ">
      <input type="text" ng-model="postal" ui-validate=" 'doMatch(city, $value)' ">

和js应该是

$scope.doMatch = function(c, p) {
     return $http.post("/api/validateCityPostal", {postal: p, city : c});
}

请注意，上面的函数正在返回一个promise。从服务器上你应该返回成功/失败，在ui-validate上有$ valid或$ invalid。

Answer 2

AngularJS 1.3引入了异步验证器。您可以添加一个向ngModelController的$asyncValidators数组返回promise的函数，它将根据promise的解析值设置模型的有效性。

如果您不能使用1.3，那么您可以在请求发生时始终将模型设置为无效，并在从服务器返回结果后将其设置为最终值。

在任何一种情况下，您链接的答案中的自定义指令方法可能是您最好的选择。

Answer 3

<form action="blablabla">
   <input type="text" ng-model="city">
   <input type="text" ng-model="postal">
</form>

JS：

 angular.module("module",[]).service("validate", ['$http', function ($http){
       this.validate_postal = function (p) {
           return $http.post("/api/validate_post", {post: p});
       }

       this.validate_city= function (c){
            return $http.post("/api/city",{city: city});
       }

}]);

验证服务返回承诺。因此，您可以在控制器中添加后者的异步回调。

Answer 4

有一个很好的例子here。 “自定义验证”部分

AngularJs使用Ajax验证依赖字段

4 个答案: