title: Using Observable inside Custom Validator Angular
body: <p>so I am creating a validator which checks if the username is already taken.</p>
  
  <p>I have the following Custom validator definition:</p>
  
  <pre><code>import { AbstractControl } from '@angular/forms';
  import { AccountApi } from '../../api/service/account.api';
  import { Injectable } from '@angular/core';
  import { switchMap, mapTo, catchError } from 'rxjs/operators';
  import { of, timer } from 'rxjs';
  
  
  @Injectable()
  export class UsernameValidator {
    constructor(private api: AccountApi) {
  
    }
  
    exists(control: AbstractControl) {
      // this.api.checkUsernameIfExisting(control.value).subscribe((existing) =&gt; {
      //   control.setErrors({ exists: existing });
      // });
  
      // return null;
  
      return timer(100).pipe(
        switchMap(() =&gt; this.api.checkUsernameIfExisting(control.value).pipe(
            // Successful response, set validator to null
            mapTo(null),
            // Set error object on error response
            catchError(() =&gt; of({ exists: true }))
          )
        )
      );
    }
  }
  </code></pre>
  
  <p>This is how I used it:</p>
  
  <pre><code> username: ['', [
      Validators.required,
      Validators.minLength(6),
      Validators.maxLength(30),
      this.usernameValidator.exists.bind(this.usernameValidator)
   ]],
  </code></pre>
  
  <p>My question is, why does the call on my API doesn't get triggered? I checked if the form is calling exists() and it calls it.</p>
  
  <p>Thanks!</p>