CODEWITHSUNDEEP
angulartypescriptangular-reactive-forms
user10191119
user10191119

Reputation:

Angular reactive forms - get formControl for custom validator

I have implemented a generic custom validator as a function looking like this:

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

pretty easy and straight forward: It gets the value from the form control and if the value is defined or it passes the condition given on a parameter it returns null, else an errorobj.

Now i want to assign this custom validator on a control, but I dont know how to pass the current Abstractcontrol. I've tried something like this:

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

But this does not work. How do I pass the current formcontrol as a parameter?

Upvotes: 0

Views: 1861

Answers (1)

user4676340
user4676340

Reputation:

I think that you didn't write you validator in the right way.

Try this instead. 

export function validate(callback: Function, error: string): ValidatorFn {
  return (control: FormControl) => {
    return control.value && callback(control.value) ? { [error]: true } : null;
  };
}

You can call it with 

webUrl: ['', [validate(hasWebURLPattern, 'webUrl')]]

It works by giving in a function, that will be called with the value of the form control directly into the validator. You also provide directly an error string, reducing effectively the code complexity.

Also, don't forget that you will lose your this context : if your callback has this references in it, add this to your call : 

webUrl: ['', [validate(hasWebURLPattern.bind(this), 'webUrl')]]

Upvotes: 2

Related Questions