自定义异步验证表单处于挂起状态

Question

我有一个自定义的异步验证函数。它运作良好，但在提交之前，我检查表格是否有效 - 它不是。它处于 PENDING 状态。我应该如何解决这个问题？我可以等待异步验证吗？或者我可以跳过那里的异步验证吗？

我更愿意保留 updatevalueandvalidity 循环。

//Custom ASyncValidation function
checkUniqueProxy(): AsyncValidatorFn {
return (control: AbstractControl) => {
  if (!control.valueChanges) {
    return of(null);
  } else {
    return control.valueChanges.pipe(
      debounceTime(1000),
      distinctUntilChanged(),
      switchMap(value => this.api.get('My_API_ENDPOINT', {proxy: value})),
      map((data:any) => {
        return data?.unique ? null : {uniqueError: true};
      })
    ).pipe(first())
  }
}



//SAVE FORM 
save(): void {

for (const i in this.Form.controls) {
  if (this.Form.controls.hasOwnProperty(i)) {
    this.Form.controls[i].markAsDirty();
    this.Form.controls[i].updateValueAndValidity();
  }
}
//AT THIS POINT THE FORM IS IN PENDING STATUS
if (!this.Form.valid) return this.notification.createNotification('error', 'Validation error!', 'Please correct the form!')
/// SUBMIT
}

Answer 1

我是这样解决的，如果大家有更好的解决办法，欢迎post提出来

//Submit function
save(): void {
  for (const i in this.Form.controls) {
    if (this.Form.controls.hasOwnProperty(i)) {
      this.Form.controls[i].markAsDirty();
      this.Form.controls[i].updateValueAndValidity();
    }
  }
  //At this point ASYNC validation is in pending status
  this.Form.statusChanges.pipe(takeWhile(x => x == 'PENDING', true), filter(x => x != 'PENDING')).subscribe(d => {
      if (!this.Form.valid) return this.notification.createNotification('error', 'Validation error!', 'Please correct your mistakes!')
      
      //And now send data to server or something.
  })

}

自定义异步验证表单处于挂起状态

Custom Async validation form in pending status

angular-validation

angular