Can someone please share any insight on fixing this error?

Question

I am new to stack overflow and I apologise if anything wrong in this post. I have tried various alternatives but did not found any solution.I am just looking for suggestion. Can someone please advise what is wrong in below code.I appreciate the help

Error I am getting, Property 'validate' in type 'productValidatorDirective' is not assignable to the same property in base type 'AsyncValidator'

Here is scenario in Angular 9, I am trying to use custom validator with input type text in template driven form.I am making api call and trying to validate if ID is exist, If it exist display error to user - ID is available.

<input type="text" class="form-control" id="productIDInput" ngModel name="productIDInput" #productIDInput="ngModel"  [value]="validateInputKeys" productValidator>



    @Directive({
     selector: '[productValidator]',
     providers: [
     {
      provide: NG_ASYNC_VALIDATORS,
      useExisting: productValidatorDirective,
      multi: true
     }
      ]
     })
     export class productValidatorDirective implements AsyncValidator {
     @Input("Id") Id: string
     constructor(private http: HttpClient, private service: productService) {  }
      validate(control: FormControl): Promise<any> | Observable<any> | { [key: string]: any } | null  
      {
         var pArray: Array<PDocument>;
         const promise = new Promise<any>(
         (resolve, reject) => {
          this.service.getId(this.Id)
              .subscribe(
                (data: any) => {
                   pArray = data;
                   let isAvailable = pArray.some(function (el) { return el.code === control.value });
                   if (isAvailable) {
                      resolve({ IdExists : true });
                   }
                   else {
                     resolve(null);
                  }
                 },
                 )
                 });
                 return promise;