Angular 8 - 不可分配给 AsyncValidatorFn答案

【问题标题】：Angular 8 - not assignable to AsyncValidatorFnAngular 8 - 不可分配给 AsyncValidatorFn
【发布时间】：2022-05-04 19:41:59
【问题描述】：

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

form.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 上悬停时显示错误 -

"参数类型（控件：AbstractControl）=> Promise 不可分配给参数类型 AsyncValidatorFn | 异步验证器Fn[] |空"

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

【问题讨论】：

您是否尝试使用不带static 修饰符的isUnique-方法？请改用public。

标签： angular

【解决方案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”功能：

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

【讨论】：

【解决方案2】：

这是一个很好的教程，你可以试试https://www.netjstech.com/2020/11/custom-async-validator-angular-reactive-form.html

【讨论】：

【解决方案3】：

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

npm i --save bluebird

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

import * as Promise from 'bluebird';

【讨论】：