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，这是一个很好的例子。

我如何在angular2中去抖形式

1 个答案: