Angular2 Generic Async Validator in Reactive Forms

Question

I have a reactive form and a form control that must unique:

this.form = new FormGroup({
  name: new FormControl(this.initialValue, [
    Validators.required,
  ], this._uniqueNameValidator.bind(this)),
});

I've wrote an async validator that calls a method from my app service:

private _uniqueNameValidator(control: FormControl) {
    const value = control.value.trim();
    if (value === '' || value === this.initialValue) {
      return of(null);
    }
    control.markAsTouched();
    return timer(500).pipe(
      switchMap(() => {
        return this._appService.validateName(value, this.selectedGroupId);
      }),
      map(response => {
        return response ? {nameTaken: true} : null;
      }),
      catchError(() => {
        return of(null);
      })
    );
 }

The service method is a simple http GET that returns a boolean value:

validateName(name: string, groupId: number): Observable<boolean> {
 // ...
 return this._http.get<boolean>(url);
}

Working example: https://stackblitz.com/edit/angular-8kedup

Now, in my app a have many another forms with controls that must be unique. The uniqueness is checked async, but in other services methods and in other routes. I don't want to copy the code for the validator in every component that needs an async validator for uniqueness.

The problem: I want to write a generic validator, that takes as parameters a service method that must be called in order to determine if the value is unique or not, and the initial form value.

I wrote the following function:

export function UniqueAsyncValidator(fn: any, initialValue: string): AsyncValidatorFn {
  return (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
    const value = control.value.trim();
    if (value === '' || value === initialValue) {
      return of(null);
    }
    control.markAsTouched();
    return timer(500).pipe(
      switchMap(() => {
        return fn(value);
      }),
      map(response => {
        return response ? {nameTaken: true} : null;
      }),
      catchError(() => {
        return of(null);
      })
    );
  };
}

And form definition:

    this.form = new FormGroup({
      name: new FormControl(this.initialValue, [
        Validators.required,
        ], UniqueAsyncValidator(this._appService.validateName, this.initialValue).bind(this)),
   });

It seems that the service method is called, but the context (this) in the service method is undefined:

validateName(name: string, groupId: number): Observable<boolean> {
  // ....
  console.log( 'this: ', this );  // -> returns undefined 
  return this._http.get<boolean>(url);
}

Example: https://stackblitz.com/edit/angular-sbbgc8

Thanks!

Second link is broken

Kurt Hamilton
– Kurt Hamilton

2020-03-31 07:47:32 +00:00
Commented Mar 31, 2020 at 7:47 — Kurt Hamilton
– Kurt Hamilton, Commented Mar 31, 2020 at 7:47
i've fixed it now

andreivictor
– andreivictor

2020-03-31 07:47:59 +00:00
Commented Mar 31, 2020 at 7:47 — andreivictor
– andreivictor, Commented Mar 31, 2020 at 7:47

Kurt Hamilton · Accepted Answer · 2020-03-31 08:11:11Z

2

You're not making the same function call in both versions. Your service function expects groupId. You should call the service with this arg in your callback.

const uniqueValidator = UniqueAsyncValidator(
  value => this._appService.validateName(value, this.selectedGroupId), 
  this.initialValue).bind(this);

this.form = new FormGroup({
  name: new FormControl(this.initialValue, [
    Validators.required,
  ], uniqueValidator)
});

When you create the instance of UniqueAsyncValidator, you are passing in a callback. This allows you to reuse the logic inside the validator, and inject the function that will make the call.

value => this._appService.validateName(value, this.selectedGroupId)

This is arrow function syntax. It is simply declaring an anonymous function that accepts one parameter - value (this is being passed in by your validator) - and returns this._appService.validateName(value, this.selectedGroupId).

DEMO: https://stackblitz.com/edit/angular-ynmzyu

edited Mar 31, 2020 at 8:11

answered Mar 31, 2020 at 7:58

Kurt Hamilton

13.7k1 gold badge28 silver badges42 bronze badges

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

5 Comments

andreivictor Over a year ago

thanks for your reply, it seems it works. but I don't really understand the value => this._appService.validateName(value, this.selectedGroupId). Can you please explain it a little bit?

Kurt Hamilton Over a year ago

You will be creating an instance of UniqueAsyncValidator every time you want to use it. You could theoretically have a unique callback each time. If this is the case, then you just pass in that unique callback at the point of constructing it. This is the point of a callback?

Kurt Hamilton Over a year ago

I will add an explanation to my answer

Kurt Hamilton Over a year ago

I would recommend adding a type to fn - this makes it clear what you are dealing with. fn: (value: string) => Observable<boolean>. It's a function that accepts 1 string, and returns an observable boolean

Kurt Hamilton Over a year ago

And if you are always passing in an arrow function, you don't need .bind(), and you can just call fn(value) inside the validator. But what you have is fine, I'm just giving you options :)

Collectives™ on Stack Overflow

Angular2 Generic Async Validator in Reactive Forms

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related