我如何在angular2中去抖形式

Question

我經歷了很多帖子，但沒找到我要找的東西。

基本上，

我正在顯示表單更改的用戶驗證。 我的模板看起來像這樣：

<div class="form-group"
      [class.error]="!loginForm.find('email').valid && loginForm.find('email').touched">
        <div class="input-wrapper">
          <input type ="email"
              class="form-control"
              id="email-input"
              placeholder="Email"
              formControlName="email">
        </div>  
        <div *ngIf="loginForm.controls['email'].dirty && !loginForm.controls['email'].valid"
          class="alert-msg">Email is invalid</div>
</div>

而且，看看其他帖子，我的TS去抖形式是這樣的：

this.loginForm.valueChanges.debounceTime(500).subscribe(form => {
  console.log(form, this.loginForm);
});

現在，控制台日志實際上是在反彈。 但是，驗證消息不會消除。 它直接顯示消息。

有沒有辦法克服這個問題？

謝謝，為了停下來，

Answer 1

我相信debounceTime只會影響你在響應form => { ... }的代碼form => { ... } 。 那么你可以做的是在那里設置驗證：

private loginFormIsValid:boolean;
private emailIsNotValid:boolean;

ngOnInit() {
    this.loginForm.valueChanges.debounceTime(500).subscribe(form => {
        this.loginFormIsValid = !loginForm.find('email').valid 
            && loginForm.find('email').touched;
        this.emailIsNotValid = loginForm.controls['email'].dirty 
            && !loginForm.controls['email'].valid;
        console.log(form, this.loginForm);
    });
}

...然后你會在你的模板中使用它，如下所示：

<div class="form-group" [class.error]="!loginFormIsValid">
    <div class="input-wrapper">
      <input type ="email"
          class="form-control"
          id="email-input"
          placeholder="Email"
          formControlName="email">
    </div>  
    <div *ngIf="emailIsNotValid"
      class="alert-msg">Email is invalid</div>
</div>

你可以看一下關於去抖動的帖子 ，這是一個很好的例子。