カスタムバリデーターのサービスをAngular2に挿入する

Question

カスタムバリデーターでサービスを使用して、ユーザー名がすでに存在するかどうかを確認しようとしています。

import {Component} from 'angular2/core'; 
import { 
    Control, 
    ControlGroup, 
    FormBuilder 
} from "angular2/common"; 
import {CharacterService} from "./character-service"; 

@Component({ 
    selector: 'register-character-form', 
    template: ` 
     <h2 class="ui header">A new adventurer is coming...</h2> 
     <form (ngSubmit)="register()" [ngFormModel]="characterForm" class="ui form"> 
      <div class="field"> 
       <label>Nom</label> 
       <input ngControl="name"> 
      </div> 
      <button type="submit" class="ui button">Enter in the adventure</button> 
     </form> 
    `, 
    providers: [CharacterService] 
}) 
export class RegisterCharacterFormCmp { 
    characterForm: ControlGroup; 
    name: Control; 

    constructor(private _characterService: CharacterService, fb: FormBuilder) { 
     this.name = fb.control('', this.characterNameValidator); 

     this.characterForm = fb.group({ 
      name: this.name 
     }); 
    } 

    register(): void { 
     //TODO: To implement 
    } 

    // Not works, this binds the control 
    characterNameValidator(control: Control) { 
     return this._characterService.isCharacterNameAlreadyExists(control.value) ? {nameCharacterAlreadyExistsError: true} : null; 
    } 
} 

これは機能しません。 characterNameValidatorでは、 'this'はコントロールを参照し、myクラスは参照しません。サービスは未定義です。バリデーターで私のサービスを使用するにはどうすればいいですか？

さらにグローバルに、カスタムバリデーターで引数を渡すにはどうすればよいですか？

Answer 1

thisがあなたの検証に何を意味するのかを制御する必要があります。その後、期待通りに動作するはずです他のbind

this.name = fb.control('', this.characterNameValidator.bind(this)); 

すべてを行うことができます。

Answer 2

矢印機能を使用すると、コンテキストを同じに保つことができます。

this.name = fb.control('', (control: Control) => this.characterNameValidator(control));