Angular2 Custom Form Validators tracący dostęp do "tego" w klasie

Question

Buduję aplikację Angular 2 (2.0) i mam formularz, który korzysta z modułu ReactiveForms. Jako takie, używam funkcji sprawdzania poprawności w polach wejściowych, w tym niestandardowych sprawdzania poprawności. To działa dobrze.

Mój problem polega na tym, że próbuję również użyć niestandardowego AsyncValidator w polu formularza. Wydaje się dość proste, ale nigdy nie mogę odwoływać się do właściwości wewnątrz klasy z metody AsyncValidator.

FormGroup i FormControl właściwości samego kształtu i wyglądu pola wejściowego, jak to w klasie komponentu:

form: FormGroup; 
userName = new FormControl("", [Validators.required], [this.userNameAsyncValidator]); 

Jest też FormBuilder w funkcji ngOnInit() który dołącza się formularz do właściwości form.

constructor(private fb: FormBuilder, // this.fb comes from here 
      private css: ClientSecurityService) { // this.css comes from here 
} 

ngOnInit() { 
    this.form = this.fb.group({ 
     "userName": this.userName 
    } 
); 
} 

Mój problem jest to, że w AsyncValidator, jestem w stanie odwołać się którykolwiek z usług jakie zdefiniowanych w klasie komponentu - w tym this.css. Oto walidator:

userNameAsyncValidator(control: FormControl): {[key: string]: any} { 
    return new Promise(resolve => { 
    this.css.getUrl() 
     .subscribe(
     data => { 
      console.log('Returned http data:', data); 
      resolve(null); 
     }, 
     err => { 
      // Log errors if any 
      console.log(err); 
     }); 
    }); 
} 

Bez względu na to, co robię, this.css w zaproszeniu userNameAsyncValidator() jest niezdefiniowany.

(Zdaję sobie sprawę, że mój weryfikator w rzeczywistości niczego nie robi - chcę tylko móc wywołać moją usługę ClientSecurity, aby w końcu móc wywołać zdalną usługę HTTP, aby uzyskać odpowiedź, czy nazwa użytkownika jest wpis jest ważny i nie jest już używany.)

Answer 1

Twój weryfikator nie jest wywoływany z twoim komponentem jako this. Zauważ, że są przechodzącą luźne odniesienie do this.userNameAsyncValidator Możesz związać swoją walidator bez martwienia się o this konfliktów ponieważ kątowe walidacja nie opiera się na this

userName = new FormControl("", [ 
    Validators.required 
], [ 
    this.userNameAsyncValidator.bind(this) 
]);