从 Angular2 中的自定义验证器访问服务

Question

我需要从静态方法内部访问我的自定义 http 服务，例如：

import {Control} from 'angular2/common';
import {HttpService} from './http.service';

class UsernameValidator {
    static usernameExist(control: Control): Promise<ValidationResult> { 
        ... /* Access my HTTPservice here */
    }
}

在这种情况下如何访问服务？

Answer 1

class UsernameValidator {
    constructor(http:HttpService){}

    usernameExist(control: Control): Promise<ValidationResult> { 
        ... /* Access my HTTPservice here */
    }
}

然后像这样使用它

validator: new UsernameValidator(http).usernameExist

HttpService 需要在组件构造函数中注入，然后传递给手动创建的验证器实例，如上所示。

Answer 2

另一种方法是返回一个函数。这样这个函数就可以访问创建期间提供的 HttpService 实例：

class UsernameValidator {
  static createUsernameExist(http:HttpService) {
    return (control: Control) => { 
      ... /* Access my HTTPservice here */
    }
  }
}

然后你可以像这样使用它：

validator: UsernameValidator.createUsernameExist(this.httpService)

Answer 3

使用这就是我实现验证器以从 AsyncValidatorFn 内部访问服务的方式 ...

IMHO it seems cleaner to let the DI inject the service dependencies directly into the validator class instead of passing the dependencies to a static method from the consumer component to create the AsyncValidatorFn.

创建您的可注入验证器class

import { Injectable } from '@angular/core';
import { AbstractControl, AsyncValidatorFn, ValidationErrors } from '@angular/forms';

@Injectable
export class UsernameValidator {
  constructor(
    private http: HttpService,
  ) { }

  usernameExists: AsyncValidatorFn = (control: AbstractControl): Observable<ValidationErrors> => {
    // access your HttpService here...
  }
}

在模块声明中提供用于注入的验证器

@NgModule({
  providers: [
    UsernameValidator, // register your validator for injection
  ],
})
export class UserModule { }

在组件表单中设置验证器函数

constructor(
  private formBuilder: FormBuilder,
  private usernameValidator: UsernameValidator, // inject your validator
) { }

ngOnInit() {
  this.form = this.formBuilder.group({
    username: [
      null, // initial value
      [Validators.required], // sync validators
      [this.usernameValidator.usernameExists], // async validators
    ],
  });
}

从 Angular2 中的自定义验证器访问服务

Access a service from a custom validator in Angular2

angular2-forms

angular2-di

angular