Iniettare un servizio in un validatore personalizzato in Angular2

Question

Provo a utilizzare un servizio in un validatore personalizzato per verificare se esiste già un nome utente.

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

Non funziona. In characterNameValidator, "this" fa riferimento al controllo e non alla mia classe. Il servizio non è definito. Come posso usare il mio servizio nel validatore?

Più globalmente, come posso passare argomenti in un validatore personalizzato?

Answer 1

È necessario controllare che cosa significa this durante la convalida. È possibile farlo con bind

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

Tutto il resto dovrebbe funzionare come previsto allora.

Answer 2

È possibile utilizzare una funzione freccia per mantenere il contesto lo stesso.

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