將自定義服務注入到自定義驗證程序中

Question

我正在嘗試使用自定義的Angular 2表單Validator來檢查用戶是否存在於數據庫中。

這是我的自定義窗體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; 
    }); 

    } 

} 

的代碼，這是這是我的定製服務，這是負責發出請求到節點API在後端

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); 
    } 

當我嘗試驗證用戶，這是顯示的錯誤

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

我做錯了什麼？

感謝

Answer 1

@Injectable() 
export class EmailValidator { 

    constructor(private api:API) {} 

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

將它添加到的@NgModule()或@Component()這取決於你想要什麼範圍它有

providers: [EmailValidator] 

它注入到你想用它

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

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

組件