Angular 8 - 不可分配给 AsyncValidatorFn

Question

我正在尝试以反应形式创建自定义验证器函数。代码：

表单组件.ts

...
    form = new FormGroup({
        username: new FormControl('', [
            Validators.required,
            Validators.minLength(3)
        ],
            UsernameService.isUnique
        )
    });
...

用户名.service.ts

...
    static isUnique(control: AbstractControl): Promise<ValidationErrors | null> {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve({ notUnique: true });
            }, 2000);
        });
    }
...

UsernameService.isUnique将鼠标悬停在-上时显示错误

“参数类型（控制：AbstractControl）=> Promise< ValidationErrors | null > 不可分配给参数类型 AsyncValidatorFn | AsyncValidatorFn[] | null”

为什么会出现这个错误？根据文档（https://angular.io/api/forms/AsyncValidatorFn），我使用了 AsyncValidatorFn 的正确调用签名。

Answer 1

解决办法其实很简单——

在“UsernameService.isUnique”后面添加“as AsyncValidatorFn” ：

      UsernameService.isUnique as AsyncValidatorFn

或者在“<>”之前添加AsyncValidatorFn ：

      <AsyncValidatorFn>UsernameService.isUnique

当然，需要导入AsyncValidatorFn ：

      import { AsyncValidatorFn } from '@angular/forms';

实践中的例子：

下图显示没有“as AsyncValidatorFn”时出现错误：

错误消息大致相同：

      Argument of type '(control: FormControl) => 
      Promise<any> | Observable<any>' is not assignable to
      parameter of type 'AsyncValidatorFn | AsyncValidatorFn[]'

下图显示添加“as AsyncValidatorFn”后出现错误DISAPPEARED （后面）：

或（之前）：

以下是“forbiddenEmails”函数：

其实很多类似的问题都可以用同样的方法解决。

Answer 2

存在打字稿问题 - 导入错误类型（？）Promise，我必须添加安装此模块

npm i --save bluebird

并将其用作组件中的 Promise 导入：

import * as Promise from 'bluebird';