How to pass extra param to an async validator (reactive forms) in Angular?

Question

I've got the following async validator. If I want to use it to a reactive form, I have to pass it as 3rd param

slug: [null, [Validators.required], [CustomValidators.slug]],

How can I pass an extra param to the validator?

import {FormControl} from "@angular/forms";

interface IValidation {
    [key: string]: boolean;
}

export class CustomValidators {

static slug(control: FormControl) {
    const q = new Promise<IValidation>((resolve, reject) => {
        setTimeout(() => {
            if (control.value === 'TEST') {
                resolve({'duplicated': true});
            } else {
                resolve(null);
            }
        }, 1000);
    });
    return q;
}
}

If I use it as

slug: [null, [Validators.required], [CustomValidators.slug('string param')]],

the problem is that the first param is the control.

glaucomorais · Accepted Answer · 2018-01-25 12:57:52Z

1

Write your validation like this:

static slug(param: string) {
  return (control: FormControl) => {
    const q = new Promise<IValidation>((resolve, reject) => {
      setTimeout(() => {
        if (control.value === 'TEST') {
          resolve({'duplicated': true});
        } else {
          resolve(null);
        }
      }, 1000);
    });
    return q;
  };
}

answered Jan 25, 2018 at 12:57

glaucomorais

3863 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AndriiSova · Accepted Answer · 2024-04-17 08:56:28Z

0

On form declaring you can use your validator like

 @async([(control: AbstractControl) => noMatchControl(control, "oldPassword")])
  newPassword: string;

Here is validator signature

export function noMatchControl(control: AbstractControl<any, any>, targetControl: string): Promise<ValidationErrors | null> {
  return new Promise((resolve) => { ... }}

edited Apr 17, 2024 at 8:56

answered Apr 17, 2024 at 8:55

AndriiSova

11 bronze badge

Collectives™ on Stack Overflow

How to pass extra param to an async validator (reactive forms) in Angular?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related