title: Angular 2 asynchronous validator with observable: TypeError: Cannot read property 'debounceTime' of undefined
body: <p>I am trying to get asynchronous validators to work with the Angular 2 Form builder but I keep getting this error in Chrome Console:</p>
  
  <pre><code>TypeError: Cannot read property 'debounceTime' of undefined
  </code></pre>
  
  <p>I'm a bit lost. The control gets passed in but valueChanges seems to be undefined. I don't understand why.</p>
  
  <p>My Custom Validator looks like this:</p>
  
  <pre><code>import {Http, HTTP_PROVIDERS} from 'angular2/http';
  import {ReflectiveInjector} from 'angular2/core'
  import {Control} from 'angular2/common';
  import {Observable} from 'rxjs/Rx';
  import 'rxjs/Rx';
  
  interface IUsernameValidator {
  }
  
  function checkUser(control: Control) : Observable&lt;IUsernameValidator&gt; {
  
    let injector = ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]);
    let http = injector.get(Http);
  
    return new Observable((obs: any) =&gt; {
      control
        .valueChanges
        .debounceTime(400)
        .flatMap(value =&gt; http.post("http://localhost:4000/users/validate_username", JSON.stringify({ username: value })))
        .subscribe(
          data =&gt; {
            obs.next(null);
            obs.complete();
          },
          error =&gt; {
            let message = error.json().message;
            let reason: string;
            if (message === 'Username taken') {
              reason = 'usernameTaken';
            }
            obs.next({ [reason]: true });
            obs.complete();
          }
      );
    });
  }
  
  export class UsernameValidator {
  
    constructor() {}
  
    static checkUsername(control: Control) {
      return checkUser(control);
    }
  }
  </code></pre>
  
  <p>And my component that uses this Validator like this:</p>
  
  <pre><code>import { Component, OnInit } from 'angular2/core';
  import { ControlGroup, FormBuilder, Validators } from 'angular2/common';
  import { RouteParams, ROUTER_DIRECTIVES } from 'angular2/router';
  
  import { AdminService } from '../../shared/index';
  import { UsernameValidator } from '../../shared/validators/username.validator';
  
  @Component({
    selector: 'fac-admin-editor',
    templateUrl: 'app/+admins/editor/admin-editor.component.html',
    styleUrls: ['app/+admins/editor/admin-editor.component.css'],
    directives: [ROUTER_DIRECTIVES],
    providers: [AdminService]
  })
  export class AdminEditorComponent implements OnInit {
    adminForm: ControlGroup;
    action: string;
  
    constructor(private adminService: AdminService, private _formBuilder: FormBuilder, private params: RouteParams) {
      if(params.get('id') !== null) {
        this.adminService.getOne(params.get('id'));
        this.action = "edit";
      } else {
        this.action = "new";
      }
    }
  
    ngOnInit(): any {
      var email_regex = '[a-z0-9\\.\\-\\_]+@[a-z0-9\\.\\-\\_]+\\.[a-z0-9\\.\\-\\_]+';
      if(this.action === "edit") {
        this.adminForm = this._formBuilder.group({
          'username': ['', Validators.compose([
            Validators.minLength(5)
          ]), UsernameValidator.checkUsername],
          'password': ['', Validators.compose([
            Validators.required,
            Validators.minLength(8)])],
          'password_confirmation': ['', Validators.required]
          }, {validator: matchingPasswords('password', 'password_confirmation')}
        );
      } else if (this.action === "new") {
        this.adminForm = this._formBuilder.group({
          'username': ['', Validators.compose([
            Validators.minLength(5)
          ]), UsernameValidator.checkUsername],
          'password': ['', Validators.compose([
            Validators.required,
            Validators.minLength(8)])],
          'password_confirmation': ['', Validators.required]
          }, {validator: matchingPasswords('password', 'password_confirmation')}
        );
      }
    }
  
  }
  
  function matchingPasswords(passwordKey: string, passwordConfirmationKey: string) {
    return (group: ControlGroup) =&gt; {
      let passwordInput = group.controls[passwordKey];
      let passwordConfirmationInput = group.controls[passwordConfirmationKey];
      if (passwordInput.value !== passwordConfirmationInput.value) {
        return passwordConfirmationInput.setErrors({notequivalent: true})
      }
    }
  }
  </code></pre>
  
  <p>I'm using 2.0.0-beta.17</p>