Validation 如何在Angular2中的去抖动时间后触发验证输入?
我有一个带有“name”控件的表单 我创建了一个验证器:Validation 如何在Angular2中的去抖动时间后触发验证输入?,validation,asynchronous,angular,Validation,Asynchronous,Angular,我有一个带有“name”控件的表单 我创建了一个验证器: characterNameValidator(control: Control) { let q = new Promise((resolve, reject) => { setTimeout(() => { if (this._characterService.isCharacterNameAlreadyExists(control.value)) {
characterNameValidator(control: Control) {
let q = new Promise((resolve, reject) => {
setTimeout(() => {
if (this._characterService.isCharacterNameAlreadyExists(control.value)) {
resolve({nameCharacterAlreadyExistsError: true});
} else {
resolve(null);
}
}, 1000)
});
return q;
}
每次击键时,都会调用我的验证器。我正在寻找一种方法,只在一段时间后调用验证器
我尝试使用valueChanges(),但只有在调用特定服务时才理解,而在验证时则不理解
编辑
手动管理验证以解决我的问题是一个好主意吗?我没有将验证器放在我的控件中,但我在valueChanges上手动设置了错误
this.name = fb.control('');
this.name.valueChanges.debounceTime(400).subscribe(() => {
this.characterNameValidator(this.name).then((validationResult => {
this.name.setErrors(validationResult)
}))
});
请参阅,以了解相关的未决问题
如果将控件的引用传递给验证器,则可以使用
this.formGp.controls['numberFld'].updateValueAndValidity();
从获取所需内容的官方方式是在即将推出的功能中进行表单验证 但是,您可以通过订阅值更改并设置自己的错误来手动取消缓冲验证
testForm.controls['name'].valueChanges
.do(
res => {
if (res) {
this.testForm.controls['name'].setErrors({loading: true});
}
}
)
.debounceTime(500)
.subscribe(
res => {
if (this.nameSub) {
this.nameSub.unsubscribe();
this.nameSub = null;
}
this.nameSub = this.http.get(apiURL + 'exist/?name=' + res).subscribe(
exists => {
this.testForm.controls['name'].setErrors({nameExists: true});
this.nameSub.unsubscribe();
this.nameSub = null;
},
error => {
if (res) {
this.testForm.controls['name'].setErrors(null);
}
this.nameSub.unsubscribe();
this.nameSub = null;
}
);
},
error => {}
);
看起来与See的要求相同,包括针对该确切场景的完整解决方案。希望在v4中会添加与该票证相关的本机支持
this.formGp.controls['numberFld'].updateValueAndValidity();
testForm.controls['name'].valueChanges
.do(
res => {
if (res) {
this.testForm.controls['name'].setErrors({loading: true});
}
}
)
.debounceTime(500)
.subscribe(
res => {
if (this.nameSub) {
this.nameSub.unsubscribe();
this.nameSub = null;
}
this.nameSub = this.http.get(apiURL + 'exist/?name=' + res).subscribe(
exists => {
this.testForm.controls['name'].setErrors({nameExists: true});
this.nameSub.unsubscribe();
this.nameSub = null;
},
error => {
if (res) {
this.testForm.controls['name'].setErrors(null);
}
this.nameSub.unsubscribe();
this.nameSub = null;
}
);
},
error => {}
);