AsyncValidation with promise and observable

Ionic Framework ionic-v3
1

Hello, i want use a async validator

.

  1. first get authdata - token
  2. check validity in async request on server.

import { Injectable } from ‘@angular/core’;
import { FormControl } from ‘@angular/forms’;
import { ApiService } from ‘./…/…/services/api.service’;
import { AuthenticationService } from ‘./…/…/services/authentication.service’;

@Injectable()
export class Validators{

apiService: ApiService;

authenticationService: AuthenticationService;
constructor(apiService: ApiService, authenticationService: AuthenticationService) {
    this.apiService = apiService;
    this.authenticationService = authenticationService;
}

checkUniqueUserEmail(control: FormControl): Promise<any> {

      const promise = new Promise<any>(
         (resolve, reject) => {
            this.authenticationService.getToken()
                .then(token => {
                    
                    let observable = this.apiService.validateUniqueUserEmail(control.value, token);
                    
                    resolve({'uniqueUserEmail': true});
                    observable.subscribe(
                        (res:any) => {
                            console.log('it never gets here');
                            console.log(res.data);
                            if (res.data && !res.data.valid) {
                                console.log('invalid');

                                resolve({'uniqueUserEmail': true});
                            } else {
                                console.log('valid');
                                resolve(null);
                            }
                        },
                        (err) => {
                            console.log('it never gets here');
                            console.log(err);
                        }
                    )   
            })
             
         }
     );
     return promise;
 }

}

#########################################

In Formbuilder:

…
this.registerData = this.formBuilder.group({
email : [’’, [Validators.required, Validators.pattern("[A-Za-z0-9._%±]+@[A-Za-z0-9.-]+.[a-zA-Z]{2,4}")], [(control: FormControl) => {
this.customValidators.checkUniqueUserEmail(control)}
]],
…

i become this error:

Runtime Error
Cannot read property ‘subscribe’ of undefined
Stack
TypeError: Cannot read property ‘subscribe’ of undefined
at http://localhost:8100/build/main.js:111845:14
at new t (http://localhost:8100/build/polyfills.js:3:11329)
at toPromise (http://localhost:8100/build/main.js:111843:12)
at _convertToPromise (http://localhost:8100/build/main.js:8455:187)
at Array.map (native)
at http://localhost:8100/build/main.js:8448:80
at http://localhost:8100/build/main.js:8461:49
at Array.map (native)
at _executeAsyncValidators (http://localhost:8100/build/main.js:8461:23)
at FormControl.asyncValidator (http://localhost:8100/build/main.js:8448:28)

THX FOR HELP

2

The error would seem to suggest that you are expecting this.apiService.validateUniqueUserEmail() to be returning an Observable, but it isn’t. I also see zero reason for you to be creating a promise manually here. Use Observable.toPromise() instead.