文章/答案/技术大牛

发布

社区首页 >问答首页 >角反应表单-获取自定义验证器的formControl

问角反应表单-获取自定义验证器的formControl
EN

Stack Overflow用户

提问于 2018-09-12 11:34:04

回答 1查看 1.4K关注 0票数 0

我已经将一个通用的自定义验证器实现为如下所示的函数：

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，否则就是一个错误。

现在我想在控件上分配这个自定义验证器，但是我不知道如何传递当前的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})]]
        })
    });
}

但这行不通。如何将当前窗体控件作为参数传递？

angular

typescript

angular-reactive-forms

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-09-12 11:48:51

我认为你没有用正确的方式编写验证器。

试试这个吧。

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52294169

复制

相似问题

问角反应表单-获取自定义验证器的formControl
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角反应表单-获取自定义验证器的formControlEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角反应表单-获取自定义验证器的formControl
EN