Question

我已经实现了一个通用的自定义验证器，其功能如下所示：

export function validate(control: AbstractControl, validation: boolean,
                         errObj: { [key: string]: boolean }): null | { [key: string]: boolean } {
    const toCheck: string = control.value;
    if (!toCheck || validation) {
        return null;
    } else {
        return errObj;
    }
}

非常简单直接：它从表单控件获取值，并且如果定义了该值或它通过了参数给出的条件，则返回null，否则返回errorobj。

现在，我想在控件上分配此自定义验证器，但我不知道如何传递当前的Abstractcontrol。我已经尝试过这样的事情：

private formBuilder: FormBuilder = new FormBuilder();

public setForm(form: SomeType): FormGroup {
    return this.formBuilder.group({
        days: [form.days],
        ...
        useDefaultRule: [form.useDefaultRule],
        urls: this.formBuilder.group({
            webUrl: [form.urls.webUrl, [validate(new FormControl(),
                hasWebURLPattern(new FormControl().value),
                {webUrl: true})]]
        })
    });
}

但这不起作用。如何将当前的formcontrol作为参数传递？

Answer 1

我认为您没有以正确的方式编写验证程序。

试试看。

export function validate(callback: Function, error: string): ValidatorFn {
  return (control: FormControl) => {
    return control.value && callback(control.value) ? { [error]: true } : null;
  };
}

您可以使用

进行调用

webUrl: ['', [validate(hasWebURLPattern, 'webUrl')]]

它通过提供一个函数来工作，该函数将使用表单控件的值直接调用到验证器中。您还可以直接提供错误字符串，从而有效降低代码复杂性。

此外，请不要忘记您会丢失this上下文：如果您的回调函数中包含this个引用，请将其添加到您的通话中：

webUrl: ['', [validate(hasWebURLPattern.bind(this), 'webUrl')]]

角反应形式-获取用于自定义验证程序的formControl

1 个答案: