Async Validation - Failed to access a service from custom validation in angular 2

Question

I am trying to create a async custom validator to check if a EmployeeId already exist in a form. For that I have Created a custom validator and implemented a service to call a web api.

When i tried to search the EmployeeId I got an error saying Cannot read property 'service' of undefined

Anyone having ideas how to do this..

Custom Validator

 import { FormControl } from '@angular/forms'
 import { HttpService } from '../Services/app.service';

export class EmployeeValidators {

constructor(private service: HttpService) { }

EmpIdCheck(control: FormControl) {

        this.service.LoginCheck(control.value).subscribe(
            data => {
                if (data.length == 0 || data.length == 1) {
                    resolve(null);
                } else {
                    resolve({ EmpIdCheck: true });
                }
            },
            err => {
                resolve({ EmpIdCheck: true });
            }
        )
    });
}

}

Component

export class LoginComponent {
     myForm: FormGroup;
constructor(private _HttpService: HttpService, private fb: FormBuilder) {
    this.myForm = fb.group({
        empId: ['', Validators.compose([Validators.required, Validators.pattern("^[0-9]*$"), Validators.minLength(5), Validators.maxLength(5)]), new EmployeeValidators(this._HttpService).EmpIdCheck],
        password: ['', Validators.compose([Validators.required, Validators.minLength(6), Validators.maxLength(10)])]
    });
}

Service

 @Injectable()
  export class HttpService {
public LoginCheck = (datas): any => {
    let body = JSON.stringify({ datas });   
    return this._http.post(this.actionUrl, datas, {headers: this.headers}).map(this.extractData)
        .do(data => console.log(data))
        .catch(this.handleError);
}
private extractData(res: Response) {
    let body = res.json();
    return body.Data || {};
}

private handleError(error: Response) {
    console.log(error)
    return Observable.throw(error.json() || "server error")
}
}

Answer 1

I would change the Validator's function call with new EmployeeValidators(this._HttpService).EmpIdCheck

I think the problem is about DI, you could try to inject de dependency as a parameter of the function and call de Validator like this (you can add it inside de Validators.compose or out of it like you already have):

 this.myForm = fb.group({
        empId: ['', Validators.compose([Validators.required, Validators.pattern("^[0-9]*$"), Validators.minLength(5), Validators.maxLength(5),EmployeeValidators.EmpIdCheck(this._HttpService)])],
        password: ['', Validators.compose([Validators.required, Validators.minLength(6), Validators.maxLength(10)])]
    });

Moreover I think you should add your service as a provider of the component, but I think the best practice is having it in your Custom Validator as a provider, you should get the dependency where it is going to do the function.

You can read more about this here:

https://auth0.com/blog/angular2-series-forms-and-custom-validation/

http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

I hope this can help you.