Angular 反应式表单 - 为自定义验证器获取 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})]]
        })
    });
}

但这不起作用。如何将当前的表单控件作为参数传递？

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