具有observable:TypeError:无法读取属性的Angular 2异步验证器';去BounceTime';未定义的
我试图让异步验证器与Angular 2 Form builder配合使用,但在Chrome控制台中不断出现以下错误:具有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
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表单变得更成熟。。。