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

Question

我有一个自定义组件在我的应用程序上继承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(['[e-mail]'], [Validators.email]);

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

我想给父级一个选项，在我的自定义组件上使用内置的角度验证器。（必填项，电子邮件，最小值，最大值……)。

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

[ '[e-mail]', '[e-mail]' ]

组件如下所示

问题：在我的validate函数中，我可以访问ValidatorFn，它将检查我的控件是否是有效的电子邮件。如果我的控件值是一个字符串，它会像预期的那样工作，但它是一个字符串数组，所以它不工作。

但是我不知道如何确定所定义的验证器是validator.email。

this.controldir.control.validator是一个函数，我不知道如何识别它是电子邮件验证器，这样我就可以为电子邮件添加自定义验证了。

问题：我如何从我的自定义验证函数中知道哪个验证器是从父级设置的？是validators.required、validators.email...等等吗

Answer 1

如何从我的自定义验证函数中知道哪个验证器是从父级设置的？

不幸的是，没有办法获得给定控件的验证器（详细信息）。

理论上，您可以迭代您的控件值（如果它是一个数组），并创建一个新的FormControl来验证数组中的每个字符串。

作为一个例子，您可以这样做：

isControlValid(controlValue: string[], validator: ValidatorFn) {
  let emailHasError = false;
  for (value of controlValue) {
    const ctrl = new FormControl(value, validator);
    if (Object.keys(validator(ctrl)).length) {
      emailHasError = true; // if any of the values are invalid
    }
  }
  return emailHasError; // or return whatever you need to.
}

也许像这样使用它

validate(validators: ValidatorFn[], c: FormControl) {
  const allErrors: any = {};
  for (const validator of validators) {
    if (Array.isArray(c.value)) {
      if (this.isControlValid(c.value, validator)) {
        // maybe update `allErrors` here or something

您可以随心所欲地实现它，但这个想法只是使用每个字符串自己的窗体控件来验证它。

使用ng_validators可能有一些晦涩难懂的方法以不同的方式实现这一点，但我没有研究过它。