具有observable的Angular 2异步验证器：TypeError：无法读取属性＆＃39; debounceTime＆＃39;未定义的

Question

我试图让异步验证器与Angular 2 Form构建器一起使用，但我在Chrome控制台中一直收到此错误：

TypeError: Cannot read property 'debounceTime' of undefined

我有点迷失了。传入控件但valueChanges似乎未定义。我不明白为什么。

我的自定义验证器如下所示：

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<IUsernameValidator> {

  let injector = ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]);
  let http = injector.get(Http);

  return new Observable((obs: any) => {
    control
      .valueChanges
      .debounceTime(400)
      .flatMap(value => http.post("http://localhost:4000/users/validate_username", JSON.stringify({ username: value })))
      .subscribe(
        data => {
          obs.next(null);
          obs.complete();
        },
        error => {
          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);
  }
}

我使用此Validator的组件如下：

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) => {
    let passwordInput = group.controls[passwordKey];
    let passwordConfirmationInput = group.controls[passwordConfirmationKey];
    if (passwordInput.value !== passwordConfirmationInput.value) {
      return passwordConfirmationInput.setErrors({notequivalent: true})
    }
  }
}

我使用2.0.0-beta.17