title: How to use debounceTime() and distinctUntilChanged() in async validator
body: <p>I want to add <code>debounceTime</code> and <code>distinctUntilChanged</code> in my async validator.</p>
  
  <pre class="lang-js prettyprint-override"><code>mockAsyncValidator(): AsyncValidatorFn {
      return (control: FormControl): Observable&lt;ValidationErrors | null&gt; =&gt; {
        return control.valueChanges.pipe(
          debounceTime(500),
          distinctUntilChanged(),
          switchMap(value =&gt; {
            console.log(value);  // log works here
            return this.mockService.checkValue(value).pipe(response =&gt; {
              console.log(response);  // log did not work here
              if (response) {
                return { invalid: true };
              }
              return null;
            })
          })
        );
    }
  </code></pre>
  
  <p>The code above did not work, the form status becomes <code>PENDING</code>.<br>
  But when I use <code>timer</code> in <a href="https://stackoverflow.com/a/45007974/10684507">this answer</a>, the code works, but I can't use <code>distinctUntilChanged</code> then.</p>
  
  <pre class="lang-js prettyprint-override"><code>return timer(500).pipe(
      switchMap(() =&gt; {
        return this.mockService.checkValue(control.value).pipe(response =&gt; {
          console.log(response);  // log works here
          if (response) {
            return { invalid: true };
          }
          return null;
        })
      })
    );
  </code></pre>
  
  <p>I tried to use <code>BehaviorSubject</code> like</p>
  
  <pre class="lang-js prettyprint-override"><code>debouncedSubject = new BehaviorSubject&lt;string&gt;('');
  </code></pre>
  
  <p>and use it in the <code>AsyncValidatorFn</code>, but still not work, like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>this.debouncedSubject.next(control.value);
  return this.debouncedSubject.pipe(
    debounceTime(500),
    distinctUntilChanged(), // did not work
                            // I think maybe it's because of I next() the value
                            // immediately above
                            // but I don't know how to fix this
    take(1), // have to add this, otherwise, the form is PENDING forever
             // and this take(1) cannot add before debounceTime()
             // otherwise debounceTime() won't work
    switchMap(value =&gt; {
      console.log(value); // log works here
      return this.mockService.checkValue(control.value).pipe(response =&gt; {
          console.log(response);  // log works here
          if (response) {
            return { invalid: true };
          }
          return null;
        }
      );
    })
  );
  </code></pre>