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

【问题标题】：Access a service from a custom validator in Angular2从 Angular2 中的自定义验证器访问服务
【发布时间】：2016-06-01 00:56:00
【问题描述】：

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

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

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

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

【问题讨论】：

你能把你的代码多放一些sn-p吗？
什么是HTTPService？把它的sn-p。

标签： angular angular2-forms angular2-di

【解决方案1】：

class UsernameValidator {
    constructor(http:HttpService){}

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

然后像这样使用它

validator: new UsernameValidator(http).usernameExist

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

【讨论】：

所以我必须为每个异步验证器创建新对象？像内置 Validators.minLength(12) 这样实现我的验证器并将 http 作为参数传递是个好主意吗？
当然，如果您将其用作指令，则可以直接注入 HttpService。我假设是 FormBuilder。
感谢您的回答，之后我实现了蒂埃里给出的相同的东西，所以我接受了他的回答。
这还是要走的路吗？我希望验证器可以自动安装和依赖注入（我不想称之为“新”）
new没有错，不过你也可以把它做成服务，注入。这取决于您选择哪种方式。

【解决方案2】：

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

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

然后你可以这样使用它：

validator: UsernameValidator.createUsernameExist(this.httpService)

【讨论】：

当像这样初始化 FormControl 时：username: ['', [Validators.required, UsernameValidator.createUsernameExist(this.httpService)]] 我收到一个错误“TypeError: UsernameValidator.createUsernameExist is not a function”，如何使它工作？
我正在关注这个例子，我可以看到每个案例的日志输出，但我的字段永远无效。服务调用应该是什么样的？这就是我正在使用的。 return (control: Control) => { ... /* 在此处访问我的 HTTP 服务 */ return myService.getStuff().subscribe( data => { if(bad){ return {bad:true} }else { return null; } } }

【解决方案3】：

使用Günter Zöchbauer's answer 这就是我实现验证器以从AsyncValidatorFn 内部访问服务的方式...

恕我直言，让 DI 将服务依赖项直接注入验证器类，而不是将依赖项从消费者组件传递给静态方法以创建 AsyncValidatorFn，这似乎更简洁。

创建您的可注入验证器类

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

【讨论】：