Angular Async Validation

gistfile1.txt

this.form = this.formBuilder.group({
      code: ['',
        [Validators.required, Validators.pattern('^[A-Za-z0-9]{4}')],
        this.asyncCodeValidator.validate(),
      ]
    });
    
    
    @Injectable({ providedIn: 'root' })
export class AsyncCodeValidatorService {
  constructor(private codeService: CampaignService) {}

  validate(): AsyncValidatorFn {
    return (control: AbstractControl): Observable<ValidationErrors | null> => {
      return this.searchCode(control.value).pipe(
        map(result => {
          return result.available ? null : { notUnique: 'Action code not unique' };
        })
      );
    };
  }

  searcCode(code: string): Observable<CodeValidate> {
    return timer(500).pipe(
      switchMap(() => {
        return this.codeService.validateCode(code); // return Observable<CodeValidate> 
      })
    );
  }
  
  
  <form [formGroup]="form">
       <input type="text" formControlName="code">

      <p style="color: red" *ngIf="form.get('code').errors?.notUnique">code not available</p>
</form>
}

gistfile2.txt

https://stackoverflow.com/questions/68034096/angular-asyncvalidatorfn-works-only-onblur-and-not-on-keypress-event

Not updateding in the DOM

remove: changeDetection: ChangeDetectionStrategy.OnPush