时间戳

首页 > 解决方案 > 如何在角度组件中使用 debounceTime？

angular - 如何在角度组件中使用 debounceTime？

问题描述

我的要求是以仅在用户停止键入后才显示错误消息的方式执行反应式表单字段验证。

我如何使用响应式表单和 Rxjs debounceTime 来实现这一点？

我正在寻找一种适用于反应式表单的解决方案

标签： angularrxjsdebounce

解决方案

让它工作的（或至少一种）方法是在你去的时候动态地删除和添加你的验证器。

在您的输入中，使用keydown将在用户开始键入时剥离验证器的keyup绑定，以及将通过 debounceTime 管道运行然后重新应用验证器的绑定（但仅在指定的去抖动时间过去之后）。

代码在这里：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Component({
    selector: 'form-component',
    template: `
        <form [formGroup]="formGroup">
          <input type="text" formControlName="name" (keyup)="onKeyUp()" (keydown)="onKeyDown()" [ngClass]="{ 'invalid': formGroup.controls.name.invalid }">
        </form>
      `,
    styles: [
        '.invalid { border-color: red; color: red; }'
    ]
})
export class FormComponent implements OnInit {

    formGroup: FormGroup;
    subject: Subject<any> = new Subject();

    constructor(private formBuilder: FormBuilder) {}

    ngOnInit(): void {
        this.formGroup = this.formBuilder.group({
            name: [ '' ]
        });

        // Subscribe to the subject, which is triggered with each keyup
        // When the debounce time has passed, we add a validator and update the form control to check validity
        this.subject
            .pipe(debounceTime(500))
            .subscribe(() => {
                    this.formGroup.controls.name.setValidators([ Validators.minLength(5) ]);
                    this.formGroup.controls.name.updateValueAndValidity();
                }
            );
    }

    onKeyUp(): void {
        this.subject.next();
    }

    onKeyDown(): void {
        // When the user starts to type, remove the validator
        this.formGroup.controls.name.clearValidators();
    }

}

这里还有 StackBlitz：https ://stackblitz.com/edit/debounce-validator

推荐阅读