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;
    }
}

非常简单直接：它从表单控件获取值，如果定义了该值，或者它传递了参数上给定的条件，则它 returns 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')]]

Angular 响应式表单 - 获取自定义验证器的 formControl

Angular reactive forms - get formControl for custom validator

typescript

angular

angular-reactive-forms