Validation 如何在Angular2中的去抖动时间后触发验证输入?

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

我有一个带有“name”控件的表单

我创建了一个验证器:

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 => {}
);