具有observable:TypeError:无法读取属性的Angular 2异步验证器';去BounceTime';未定义的

具有observable:TypeError:无法读取属性的Angular 2异步验证器';去BounceTime';未定义的,angular,validation,typescript,Angular,Validation,Typescript,我试图让异步验证器与Angular 2 Form builder配合使用,但在Chrome控制台中不断出现以下错误: TypeError: Cannot read property 'debounceTime' of undefined 我有点迷路了。控件被传入,但valueChanges似乎未定义。我不明白为什么 我的自定义验证器如下所示: import {Http, HTTP_PROVIDERS} from 'angular2/http'; import {ReflectiveInject

我试图让异步验证器与Angular 2 Form builder配合使用,但在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);
  }
}
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

异步验证器仍然存在一些问题。另请参见,这项工作目前正在进行中。@GünterZöchbauer这些都没有描述我遇到的问题。您正在同时使用同步和异步验证器,这是已知的不起作用的。RC2中提供了一个新的表单模块(虽然还没有准备好使用),但我认为不值得浪费太多时间使用旧的不推荐的模块。我认为这个想法是
[值、同步校验器、异步校验器]
(伪代码)。我刚刚升级到rc2并开始查看新的表单模块。但是,好的,然后我必须在表单提交服务器端验证用户名的唯一性,并等待angular表单变得更成熟。。。