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

我有类似的问题。就我而言，我正在调用一个自定义的EmailValidator类，该类包含在我创建的共享Angular 7库中。由于

"@angular/forms": "~7.2.2"

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

删除两个项目的node_modules文件夹
删除两个项目的package-lock.json
对两个项目都进行npm安装
重新安装库

Answer 2

这很奇怪，您是否已尝试使用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，它运行得很好。

Answer 3

我通过将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时收到此错误消息。

Angular 2- Error：输入＆＃39; AbstractControl＆＃39;不能分配类型＆＃39; AbstractControl＆＃39;

3 个答案: