如何在自定义ControlValueAccessor中使用内置Angular验证器

问题描述

我的应用程序上有一个继承ControlValueAccessor的自定义组件，该组件集成了ng-select

该组件的目标是在一个中央位置集成ng-select，以便我在整个应用程序中重复使用它。

这就是我所谓的验证方法：

  constructor(
    @Optional() @Self() public controlDir: NgControl
  ) {
    controlDir.valueAccessor = this;
  }

  ngOnInit() {
    const control = this.controlDir.control;
    if (control.validator) {
      control.setValidators([this.validate.bind(this,[control.validator])]);
    }
    control.updateValueAndValidity({ emitEvent: false });
  }

  validate(validators: ValidatorFn[],c: FormControl) {
    const allErrors: any = {};
    for (const validator of validators) {
      const hasError = validator(c);
      if (hasError) {
        Object.entries(hasError).forEach(([errorName,isOnError]) => {
          allErrors[errorName] = isOnError;
        });
      }
    }

    if (Object.keys(allErrors).length > 0) {
      return allErrors;
    }

    return null;
  }

这是我通常在父组件上实例化formControl的方式：

const control = this.formBuilder.control(['[email protected]'],[Validators.email]);

this.form = this.formBuilder.group({ test: control });

我想让父母选择在自定义组件上使用内置角度验证器。（必填，电子邮件，最小，最大...）。

问题是我的自定义组件的控制值是一个字符串数组，例如，该值将是：

[ '[email protected]','[email protected]' ]

组件看起来像这样

问题：在我的验证功能中，我可以访问ValidatorFn，该控件将检查我的控件是否为有效电子邮件。如果我的控制值是一个字符串，它将按预期工作，但是它是一个字符串数组，所以它不起作用。

所以我的猜测是我需要为我的自定义组件重新实现电子邮件验证程序（因为有意义的是，角度无法神奇地确定我的自定义组件中的数据结构）。

但是我不知道如何识别定义的验证者是Validator.email。

this.controlDir.control.validator是一个函数，我不知道如何识别它是电子邮件验证程序，因此我可以为电子邮件添加自定义验证。

问题：如何从我的自定义验证功能中知道从父级设置了哪个验证程序？是Validators.required，Validators.email ... etc

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular-custom-validators