将自定义服务注入到自定义验证器中

Question

我正在尝试创建一个自定义的Angular 2表单验证器，以检查用户是否存在于数据库中。

这是我的自定义表单验证器的代码：

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)

我做错了什么？

谢谢

- Hanzo

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

- Günter Zöchbauer

---

谢谢！你救了我的一天。我不知道如何将自定义服务用于formBuilder.group。 - Hanzo

例如 return { error: '用户已存在' }; 或者其他你想要在出错时获取的信息。 - Günter Zöchbauer

很棒的解决方案，特别是绑定验证器。 - Faiz Mohamed Haneef

将验证器注入到组件的构造函数中有一个缺点：您正在创建一个相对于组件的单例，因此验证器的状态将在绑定到每个控件时被重用。实际上，这意味着如果一个控件被声明为无效，则另一个控件也是如此。 - marked-down

@GünterZöchbauer 好的话，如果ReactiveFormsModule提供了一种查询FormControl上验证器的方法，并提供了一种确定哪些特定的AsyncValidators处于“PENDING”状态的方法，那就太好了，但是它没有，所以我们最终陷入了验证器具有状态的情况。 - marked-down