我如何在angular2中去除形式

Question

我浏览了很多 post，但没有找到我要找的东西。

基本上，

我正在显示用户对表单更改的验证。我的模板如下所示：

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

而且，看看其他 posts，我的去抖形式的 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中去除形式

How do i debounce form in angular2

javascript

observable

angular2-forms

angular