当前位置: 首页 > 知识库问答 >
问题:

如何在角分量中使用debounceTime?

公西志文
2023-03-14

我在寻找一个解决方案,与反应形式的工作

共有1个答案

程皓轩
2023-03-14

实现这一功能的方法(或至少是一种)是动态地删除和添加验证器。

在输入中,使用keydown绑定,当用户开始键入时,它将删除验证器;使用keyup绑定,它将通过debounceTime管道运行,然后重新应用验证器(但仅在指定的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();
    }

}
 类似资料:
  • 问题内容: 根据文档(具体来说,表格将指令与组件进行了比较),角度组件允许需要其他指令(还是仅组件?)。但是,组件没有链接功能,该功能可以访问所需的控制器。源,违背了文件,似乎表明这是不可能创建组件时使用“需要”。哪个是真的? 问题答案: 引用的来源已过时。从1.5.0版本开始,其他组件中可能需要组件控制器(指令同样适用)。 该指南中的一个示例显示了如何在不借助的帮助下,组件和指令在1.5中进行交

  • 问题内容: 今天,我一直在努力处理以下这些量角器代码行: 放在语句后似乎总是失败。 错误输出太模糊: UnknownError:JavaScript错误:等待结果时卸载文档 那么,单击超链接并检查新URL的正确方法是什么? 这是我的测试: 如果我在点击链接之前, 测试将通过。 如果我点击链接后, 上面的输出在Protractor中引发错误。什么地方出了错? 问题答案: 不用调用,而是 等待URL更

  • 问题内容: 我希望使用Protractor,CucumberJS和Jasmine来测试我的项目。如何在量角器中同时使用Jasmine和CucumberJS?这是我创建的项目设置: / path / to / myproj / protractor.conf.js 如您所见,该项目使用“黄瓜”作为框架。如何与CucumberJS一起添加Jasmine框架?是通过量角器配置文件还是代码中的其他位置?

  • 问题内容: 当我在循环中使用Protractor时,循环索引()不是我期望的。 症状: 失败:索引超出范围。尝试访问索引为’x’的元素,但是只有’x’个元素 要么 索引是静态的,并且始终等于最后一个值 我的密码 例如: 要么 要么 问题答案: 发生这种情况的原因是因为量角器使用了诺言。 阅读https://github.com/angular/protractor/blob/master/docs

  • 问题内容: 我正在使用Protractor执行一些端到端测试,我想通过命令行传递登录凭据,而不是将它们存储在spec文件中。我在某人使用过的地方找到了一个帖子,但是如何存储这些值并在另一个spec文件中使用它们?我有一个文件,我想在其中使用命令行参数。 谢谢! 问题答案: 在参考配置中,此部分可能很有趣: 您可以在代码中像这样访问params对象: 因此,在您的情况下,如果您这样调用量角器: 您可

  • 我最近一直在用厚颜无耻为我的角度应用程序编写单元测试,到目前为止一切都很好,但现在我开始编写e2e测试,并想使用量角器,因为这是在现代角度中进行e2e的推荐方法,但我不确定如何将两者集成。 我一直在搜索,找不到任何例子或提示。你可以在这里看到我目前正在我的一个宠物项目中尝试的设置:https://github.com/guerrademitos/MitoPedia