Weboldal keresés

typescript - Angular aszinkron űrlapellenőrzés injektált szolgáltatókkal


Van egy egyedi aszinkron ellenőrzőm egy reaktív űrlapban, amelynek egy szolgáltatást kell meghívnia annak ellenőrzésére, hogy a név egyedi-e.

Mivel az érvényesítők tiszta függvények, úgy tűnik, nincs jó módja annak, hogy egy olyan szolgáltatót, mint az HTTP, injektáljunk ezeknek a hívásoknak a végrehajtásához.

A kódom, ami jelenleg van, egy olyan függvényt ad vissza, ami átadja a szolgáltatást, de ez kicsit hacky-nek tűnik...

export function nameValidator(platformService: PlatformService): ValidatorFn {
    return (control: FormControl): { [key: string]: any } => {
        return userService.getUnique(control.value)
    };
}

A kérdésem az, hogy van-e jobb mód?

Válasz #1

A validátorok beadható direktívaosztályok lehetnek, amikor direktívaként vannak használva sablonokban.

Azt várják el, hogy függvények legyenek, amikor közvetlenül a FormControl vagy a FormBuilder megadásakor használják őket

A DI használatához useFactory vagy useClass szolgáltatóknak kell lenniük, és be kell őket injektálni egy komponensbe:

@Injectable()
class NameValidator implements AsyncValidator {
  constructor(private userService: UserService) {}

  validate = (control: FormControl) => this.userService.getUnique(control.value);
}

...

new FormControl('', nameValidator.validate);

Figyeld meg, hogy a validate metódust callbackként adják át, és vagy arrow függvénynek kell lennie, vagy az osztálypéldányhoz kell kötni a bind segítségével.

Kapcsolódó cikkek