角反應形式-獲取用於自定義驗證程序的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')]]