Angular 6,'Cannot read property of undefined' when calling function in service

Question

I'm trying to call a function inside a service,but i keep having Cannot read property 'authenticationService' of undefined

I'm already initializing authenticationService in my component's constructor,

The component:

 export class RegisterComponent implements OnInit {
  error: string;
  isLinear = true;
  registerFormGroup: FormGroup;
  loading = false;
  form: FormGroup;
  studentRegister: any;
  samePassword = false;
  hide = true;
  hide1 = true;
  matcher = new MyErrorStateMatcher();

constructor(
   private router: Router,
   private _formBuilder: FormBuilder,
   private http: HttpClient,
   private i18nService: I18nService,
   private authenticationService: AuthenticationService
) {
}

ngOnInit() {
    this.registerFormGroup = this._formBuilder.group({
    first_name: [null, Validators.compose([Validators.required,                 Validators.minLength(3), Validators.maxLength(20)])],
    last_name: [null, Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(20)])],
    email: [null, Validators.compose([Validators.required, Validators.email])],
    password: [null, Validators.compose([Validators.required])],
    tel: [null, Validators.compose([Validators.required])],
    confirmPassword: [null]
}, {
  validator: [this.checkPasswords, this.checkEmailUnique]
});
}

checkEmailUnique(group: FormGroup) {
 const mail = group.controls.email.value;
 const obj: any = {'email': mail, } ;
 this.authenticationService.checkEmailUnique(obj);
}

checkPasswords(group: FormGroup) { // here we have the 'passwords' group
 const pass = group.controls.password.value;
 const confirmPass = group.controls.confirmPassword.value;
 return pass === confirmPass ? null : {notSame: true};
}}

register() {
   console.log('the form is', this.registerFormGroup);
     // stop here if form is invalid
     if (this.registerFormGroup.invalid) {
      return;
     }
    this.loading = true;
    this.authenticationService.register(this.registerFormGroup.value)
     .pipe(finalize(() => {
        this.loading = false;
       }))
       .subscribe(credentials => {
        log.debug(`${credentials.email} successfully logged in`);
        this.router.navigate(['/'], {replaceUrl: true});
       }, error => {
        log.debug(`Login error: ${error}`);
        this.error = error;
       });
   }

Service:

@Injectable()
 export class AuthenticationService {
  private _credentials: Credentials | null;

  constructor(private http: HttpClient) {
    const savedCredentials = sessionStorage.getItem(credentialsKey) ||    localStorage.getItem(credentialsKey);
     if (savedCredentials) {
     this._credentials = JSON.parse(savedCredentials);
     }
     }

register(context: UserInfo): Observable<Credentials> {
    // Replace by proper authentication call
    let data = {
     email: context.email,
     token: '',
     user_type: ''
     };

    return this.http.post('/account/create_new/', JSON.stringify({
     first_name: context.first_name,
     last_name: context.last_name,
     email: context.email,
     password: context.password,
     tel: context.tel,
     user_type: 'S',
     student: {}
    }), httpOptions)
     .pipe(
       map((response: any) => {
        console.log(response.user_type);
        data.user_type = response.user_type;
        data.token = response.token;
        this.setCredentials(data, true);
         return data;
        })
      );
}

checkEmailUnique(obj: any) {
     return this.http.post('/check_email/', obj, httpOptions)
     .pipe(
      map((response: any) => {
      console.log(response);
      return response;
    })
  );}}

The call of authenticationService in register() works fine. The checkEmailUnique is supposed to send a POST request to a backend that checks if the email already exists,and returns a true or false.

Answer 1

since the validator will be called from another context the authenticationService is not available there. Try using a arrow-function so the this context is preserved:

checkEmailUnique = (group: FormGroup) => {
 const mail = group.controls.email.value;
 const obj: any = {'email': mail, } ;
 this.authenticationService.checkEmailUnique(obj);
}

also since your checkEmailUnique function from authenticationService will return Observable, you'll need to use asyncValidators.