Injecter un service personnalisé dans un programme de validation personnalisé

Question

J'essaie de créer un formulaire Angulaire 2 personnalisé Validator pour vérifier si un utilisateur existe dans une base de données.

C'est le code de mon formulaire personnalisé Validator

import { FormControl } from '@angular/forms'; 
import {API} from "../services/api"; 
import {ReflectiveInjector} from "@angular/core"; 

export class EmailValidator { 

    constructor() {} 

    static checkEmail(control: FormControl,): any { 
    let injector = ReflectiveInjector.resolveAndCreate([API]); 
    let api = injector.get(API); 

    return api.checkUser(control.value).then(response => { 
     response; 
    }); 

    } 

} 

Et c'est c'est mon service personnalisé qui est responsable de faire la demande à un api de nœud sur backend

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/toPromise'; 

@Injectable() 
export class API { 
    private backendUrl = 'http://127.0.0.1:5000/api/register/'; 

    constructor(private http: Http) { } 

    checkUser(email:string): Promise<any> { 
    return this.http.get(this.backendUrl + email) 
     .toPromise() 
     .then(response => response.json()) 
     .catch(this.handleError); 
    } 

Quand je essayer de valider un utilisateur c'est l'erreur qui est affichée

EXCEPTION: Error in ./TextInput class TextInput - inline template:0:0 caused by: No provider for Http! (API -> Http) 

Qu'est-ce que je fais mal?

Merci

Answer 1

@Injectable() 
export class EmailValidator { 

    constructor(private api:API) {} 

    /* static */ checkEmail(control: FormControl,): any { 
    return this.api.checkUser(control.value).then(response => { 
     response; 
    }); 
    } 
} 

Ajouter à des @NgModule() ou @Component() en fonction de ce que la portée que vous voulez qu'il ait

providers: [EmailValidator] 

Injecter au composant où vous voulez l'utiliser

export class MyComponent { 
    constructor(private emailValidator:EmailValidator, fb:FormBuilder){} 

    this myForm = fb.group({ 
    email: [], [this.emailValidator.checkEmail.bind(this.emailValidator)] 
    }); 
}