`$asyncValidators`

Question

在我的控制器中，我正在检查一个大的表单，其中包含很多输入，以便在填写完所有内容后生成新页面（作为JSON文件）.I使用对象var value = 'abc+def'; //Fetch The URL get value var out = value.replace(/\+/g,' '); console.log(out);手动收集输入验证。例如：

$scope.validation

然后，当缺少某些内容或需要更改内容时，我会显示相应的内容。我正在检查：

if (!$scope.title) {
    $scope.validation.title.error = true;
}

我的一个输入收集到其他页面的链接（URL）。

if ($scope.validation.title.error) { /* and many more here */
    $scope.formValid = false; // form is invalid if at least one error occurred
}

之后，我需要检查这些页面是否存在。我这样做的方式是：

<div ng-repeat="parent in parents">
    <input ng-model="parent.url" placeholder="URL" type="text" />
</div>

（实际上这是在循环中发生的，所以异步响应甚至更慢）

因为它需要等待数据到达，所以无法及时检查$http.get(url).then((res)=>{ /* page exists */ $scope.validation.parents.error = false; }. (err)=>{ /* page doesn't exists */ $scope.validation.parents.error = true; });以及其他验证。

如何异步检查此值，以便这样的方法起作用：

$scope.validation.parents.error

<小时/>

接受此类页面验证的任何其他想法

Answer 1

使用$asyncValidators API完成异步验证。

来自文档：

$asyncValidators

预期执行异步验证（例如HTTP请求）的验证集合。提供的验证函数应在模型验证过程中运行时返回承诺。一旦提交了承诺，验证状态将在满足时设置为true，在拒绝时将设置为false。触发异步验证器时，每个验证器将并行运行，并且只有在满足所有验证器后才会更新模型值。只要异步验证器未实现，其密钥将添加到控制器$pending属性中。此外，所有异步验证器只有在所有同步验证器都通过后才会运行。

请注意，如果使用$ http，则服务器返回成功的HTTP响应代码以完成验证和状态级别4xx以拒绝验证非常重要。
ngModel.$asyncValidators.uniqueUsername = function(modelValue, viewValue) {
  var value = modelValue || viewValue;

  // Lookup user by username
  return $http.get('/api/users/' + value).
     then(function resolved() {
       //username exists, this means validation fails
       return $q.reject('exists');
     }, function rejected() {
       //username does not exist, therefore this validation passes
       return true;
     });
};
— AngularJS ngModelController API Reference - $asyncValidators

有关其他信息，请参阅AngularJS Developer Reference - Custom Validation

异步页面验证 - 如何在$ http响应后检查值

1 个答案:

`$asyncValidators`