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

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')]]