Angular ValidatorFn返回，但不阻塞窗体

Question

ValidateDirectory(clientId: string): ValidatorFn {
        return (control: AbstractControl): ValidationErrors | null => {
            const ret: ValidationErrors = { isValidDirectory: true };
            if (control.value == null || control.value === '') {
                return ret;
            }
            this.service.getList(clientId, control.value).subscribe((res) => {
                if (res.technicalRetCode !== 0) {
                    console.log(ret);
                    return ret;
                }
                return null;
            });
            return null;
        };
    }

ngOnInit() {
  ...
  this.fourthFormGroup = this._formBuilder.group({
      dateipfad: ['', {validator: Validators.compose([Validators.required, this.directoryValidator.ValidateDirectory(this.clientID)]), updateOn: 'blur'}]
    });
  ... 
}

我已经尝试了很多，比如使用validators和array一起使用validators.compose，调整了我的Validator方法来设置control.seterrors(ret)其他一些东西，但都没有效果。

我觉得有一个很简单的解决办法，但我就是找不到...

编辑1：我创建了一个stackblitz https://stackblitz.com/EDIT/angular-ysyb9i？file=src%2fapp%2fapp.component.html

说明：输入接受任何字符串，在取消选择时验证开始。如果Input为'false'，则应通过返回常量ret:ValidationErrors={isvaliddirectory:true}将Input设置为invalid；，则任何其他字符串都应有效，并返回null。

这两个结果都记录在控制台上，所以您可以检查它。如果输入无效，它应该在下面显示一个通知div（不太确定，只是为了这个stackblitz显示而添加了它）

Answer 1

如果验证器中的代码是异步的，则应该使用异步验证器。

this.fourthFormGroup = this._formBuilder.group({
  dateipfad: ['', {
    validators: [Validators.required],
    asyncValidators: [this.directoryValidator.ValidateDirectory(this.clientID)],
                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                                    put it here
    updateOn: 'blur'
  }]
});

验证器应该返回AsyncValidatorFn接口，在该接口中，您应该订阅observable，但应该映射到所需的值。Angular将自动订阅您的观察。

ValidateDirectory(clientId: string): AsyncValidatorFn {
  return (control: AbstractControl): 
             Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
    const ret: ValidationErrors = { isValidDirectory: true };

    if (control.value == null || control.value === '') {
      return of(ret);
    }

    return this.service.getList(clientId, control.value).pipe(map((res: any) => {
      if (res.technicalRetCode !== 0) {
        return ret;
      }

      return null;
    }));
  };
}

分叉斯塔克布利茨