Can't set angular async validator

Question

I created the following angular async validator class, following the documentation:

import { Injectable } from '@angular/core';
import {
  AsyncValidator,
  AbstractControl,
  ValidationErrors,
} from '@angular/forms';
import { XService } from '../../pages/x/x.service';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

@Injectable()
export class UniqueXValidator
  implements AsyncValidator {
  constructor(
    private xService: XService,
  ) {}

  validate(ctrl: AbstractControl): Observable<ValidationErrors | null> {
    return this.xService.checkExists(ctrl.value).pipe(
      map(exists =>
        exists ? { uniqueX: true } : null,
      ),
      catchError(() => of(null)),
    );
  }
}

Then I try to programmatically attach it to a form control this way:

    this.form.controls['code'].setAsyncValidators(
      UniqueXValidator,
    );

I am getting the following error message displayed as a tooltip on vs code when hovering "UniqueXValidator" in the second piece of code:

    Argument of type 'typeof UniqueXValidator' is not assignable to parameter of type 'AsyncValidatorFn | AsyncValidatorFn[]'.
  Type 'typeof UniqueXValidator' is missing the following properties from type 'AsyncValidatorFn[]': pop, push, concat, join, and 25 more.ts(2345)

EDIT: It was maybe a problem of compatibility between my angular version (7) and the documentation's (11)

You need to specify method

Bojan Kogoj
– Bojan Kogoj

2021-05-06 06:48:40 +00:00
Commented May 6, 2021 at 6:48 — Bojan Kogoj
– Bojan Kogoj, Commented May 6, 2021 at 6:48
Could you please explain? @BojanKogoj

Platus
– Platus

2021-05-06 06:50:07 +00:00
Commented May 6, 2021 at 6:50 — Platus
– Platus, Commented May 6, 2021 at 6:50

Vitaliy Kuznetsov · Accepted Answer · 2021-05-06 06:54:16Z

3

Use AsyncValidatorFn instead AsyncValidator like this:

usernameValidator(): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    return this.checkIfUsernameExists(control.value).pipe(
      map(res => {
        // if res is true, username exists, return true
        return res ? { usernameExists: true } : null;
        // NB: Return null if there is no error
      })
    );
  };
}

then you can add a validator at initialization:

this.fb.group({
  username: [
    null, [Validators.required],  [this.usernameService.usernameValidator()]
  ]
});

or at runtime:

this.form.controls['code'].setAsyncValidators(
  this.usernameService.usernameValidator()
);

answered May 6, 2021 at 6:54

Vitaliy Kuznetsov

1011 silver badge5 bronze badges

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

Comments

Petr Averyanov · Accepted Answer · 2021-05-06 06:54:12Z

0

setAsyncValidators expects array not single validator

Also u dont need @Injectable() on UniqueXValidator

answered May 6, 2021 at 6:54

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

Collectives™ on Stack Overflow

Can't set angular async validator

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