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(['test@gmail.com'], [Validators.email]);

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

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

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

[ 'test@gmail.com', 'jeff@gmail.com' ]

组件看起来像这样

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

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

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

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

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

Answer 1

如何从我的自定义验证功能中知道哪个验证程序是从父母那里设置？是Validators.required，Validators.email
吗？

每个验证器函数都返回一个错误对象。如果您看到angular中的Validators.email（），它将返回{ 'email': true }对象。因此，如果您遍历control.errors（或示例中的hasError），则可以检查任何对象的键是否与email-

相匹配

static email(control) {
        if (isEmptyInputValue(control.value)) {
            return null; // don't validate empty values to allow optional controls
        }
        return EMAIL_REGEXP.test(control.value) ? null : { 'email': true };
    }

下面是您的validate()函数的外观-

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]) => {
          if(errorName === 'email' ) {
            console.log('Validators.email was set');
          }
          allErrors[errorName] = isOnError;
        });
      }
    }

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

    return null;
  }

Answer 2

如何从我的自定义验证功能中知道哪个验证程序是从父母那里设置？

不幸的是，无法获得给定控件（details）的验证器。

理论上，您可以遍历控制值（如果它是一个数组）并创建一个新的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可能会有一些晦涩的方法来实现此目的，但我尚未对此进行研究。

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

2 个答案: