我如何在 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 => { ... } 中的代码。 所以你可以做的是在那里设置验证：

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>

你可以看看post on debouncing，这是一个很好的例子。