如何将额外参数传递给 Angular 中的异步验证器（反应式表单）？

Question

我有以下异步验证器。如果我想将它用于反应形式，我必须将它作为第三个参数传递

slug: [null, [Validators.required], [CustomValidators.slug]],

如何将额外的参数传递给验证器？

import {FormControl} from "@angular/forms";

interface IValidation {
    [key: string]: boolean;
}

export class CustomValidators {

static slug(control: FormControl) {
    const q = new Promise<IValidation>((resolve, reject) => {
        setTimeout(() => {
            if (control.value === 'TEST') {
                resolve({'duplicated': true});
            } else {
                resolve(null);
            }
        }, 1000);
    });
    return q;
}
}

如果我用它作为

slug: [null, [Validators.required], [CustomValidators.slug('string param')]],

问题是第一个参数是控件。

Answer 1

像这样写下你的验证：

static slug(param: string) {
  return (control: FormControl) => {
    const q = new Promise<IValidation>((resolve, reject) => {
      setTimeout(() => {
        if (control.value === 'TEST') {
          resolve({'duplicated': true});
        } else {
          resolve(null);
        }
      }, 1000);
    });
    return q;
  };
}

Answer 2

在表单上声明您可以使用验证器，例如

 @async([(control: AbstractControl) => noMatchControl(control, "oldPassword")])
  newPassword: string;

这是验证者签名

export function noMatchControl(control: AbstractControl<any, any>, targetControl: string): Promise<ValidationErrors | null> {
  return new Promise((resolve) => { ... }}