Angular 8 - 不可分配给 AsyncValidatorFn

Question

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

表单.component.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 上时显示错误 -

"Argument type (control: AbstractControl) => Promise< ValidationErrors | null > is not assignable to parameter type 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';

实践中的例子:

下图显示有错误WITHOUT "as AsyncValidatorFn":

错误信息大致相同:

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

下面说明添加"as AsyncValidatorFn"后(后面)报错DISAPPEARED:

或(之前):

以下是“forbiddenEmails”函数:

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