如何在Angular2的debounce时间之后触发验证输入？

Question

我有一个“名称”控件的窗体。

<div class="field"> 
    <label>Name</label> 
    <input ngControl="name"> 
    <p *ngIf="name.pending"> 
    Fetching data from the server... 
    </p> 
    <div *ngIf="!name.valid && !name.pending" 
    class="ui error message">Name is not valid</div> 
</div> 

控制与FormBuilder建这样的：

this.name = fb.control('', null, this.characterNameValidator.bind(this)); 

和我创建了一个验证：

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

Answer 1

有关相关未决问题，请参阅https://github.com/angular/angular/issues/1068。

如果传递一个参考控制验证，你可以使用类似

this.formGp.controls['numberFld'].updateValueAndValidity(); 

从https://stackoverflow.com/a/33377290/217408

Answer 2

得到自己想要的是在即将到来的特点，形成验证的官方途径。

https://youtu.be/kM5QBOWrUVI?t=9m48s

但是，您可以通过订阅价值变化，并设置自己的错误手动抖验证。

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