Angular 2-错误：“AbstractControl”类型不可分配给“AbstractControl”类型

Question

我正在使用 Angular rc4 版本来编写一个应用程序，在该应用程序中我必须强加一些验证规则来形成组件，例如 required、minlength 以及一些自定义验证器 emailValidator。

当我将一个内置验证器和一个自定义验证器传递给 Validators.compose 函数时，IDE（Webstorm 和 VS 代码）会向我显示编译时错误消息，如下所示：

但是，您可以在上面的屏幕截图中看到，如果两个验证器都内置，则没有错误消息。

我的自定义验证器的定义如下：

static emailValidator(control: AbstractControl): {[key: string]: boolean} {
    if (control.value.match(/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/)) {
      return null;
    } else {
      return {'invalidEmailAddress': true };
    }
}

Answer 1

我通过将control参数的类型从AbstractControl替换为Control解决了这个问题，如下图：

static emailValidator(control: Control): {[key: string]: boolean} {
    if (control.value.match(/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/)) {
      return null;
    } else {
      return {'invalidEmailAddress': true };
    }
}

Control 类扩展自 AbstractControl。我仍然不明白为什么我在使用FormControl 或AbstractControl 时会收到此错误消息。

Answer 2

我遇到了类似的问题。就我而言，我正在调用我创建的共享 Angular 7 库中包含的自定义 EmailValidator 类。因为

"@angular/forms": "~7.2.2"

在我的 package.json 文件中，为我的库和包含它的应用程序安装了两个不同的 @angular/forms 次要版本，从而产生了不同的 TypeScript 定义文件。解决办法是

1. 删除两个项目的 node_modules 文件夹
2. 删除两个项目的 package-lock.json
3. 为两个项目执行 npm 安装
4. 重新安装库

Answer 3

这有点奇怪，你用FormControl试过了吗？

像这样？

static emailValidator(control : FormControl){
    // RFC 2822 compliant regex
    let EMAIL_REGEXP = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i;

    return EMAIL_REGEXP.test(control.value) ? null : {
      invalidEmailAddress:true
    }
}

我确实在我的组件中使用了Validator.compose，它工作得很好。