在Angular中，如何为表单（验证）添加防抖处理方法
我在使用Angular的表单时遇到了困难，所以写下了这篇备忘录，希望对其他人有所帮助。关于如何给Angular表单添加防抖功能的方法。
ご指摘があれば、新人の私に対して優しくコメントしてください。
执行环境
Angular/cli 11.2.19
nodeJS 12.16.3
npm 6.14.4
Angular/cli 11.2.19
nodeJS 12.16.3
npm 6.14.4
首先，debounce是什么意思？
防抖（debounce）是一种延迟处理的方法。具体来说，在表单等地方输入文字时，会触发input事件，并立即进行处理。
如果没有实现防抖，输入的文字将立即显示出来。
防抖和延迟执行之间的区别。
由於對setTimeOut函數的理解還不夠深入，可能有錯誤…對不起…
debounce的处理机制是在最后一个事件结束后的指定时间后运行处理。
【文本框情况下（指定延迟0.5秒）】
如果在输入过程中，0.4秒内输入下一个字符，则不会执行处理。
在最后一次输入后0.4秒后，处理才会执行。
设定一个时间限制（如果有误则为“間違っているｶﾓ”），不论事件何时发生，指定的时间后将进行处理的操作。
【在文本框情况下（设定延迟时间为0.5秒）】
在输入文字后的0.5秒后，进行处理（与此过程的中途或相关性无关）。
如果对事件指定了setTimeOut，我认为对于输入的每个文字，将在0.5秒后进行处理。
如果在表单中使用的话，似乎debounce更合适！
以下是使用 Angular 实现 debounce 的方法。
总之
(formControl).valueChanges.pipe(
debounceTime(500),
).subscribe((value: any) => {
}
可以使用 debounceTime(500) 实现。值得特别注意的是 debounceTime(500)。
在详细解释之前，先附上整体代码。
所有的代码 tǐ
app.component.ts的中文翻译为：组件.ts。
import { Component } from '@angular/core';
import { FormControl, FormGroup } from "@angular/forms";
import { debounceTime } from 'rxjs/operators'; // 1．debounceTimeを使用する場合はimportが必要
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
message : any = '';
inputTextBox: FormControl = new FormControl(); // 2．ReactiveFormを定義
formGroup = new FormGroup({
inputTextBox: this.inputTextBox
});
inputText(): void {
this.inputTextBox.valueChanges.pipe( // 3．処理を遅らせるFormControlを指定する
debounceTime(500), // 4．処理を遅らせる時間を指定
).subscribe((value: any) => { // 5．遅らせた処理のvalueに対する処理を設定
this.message = value; // 6．value = テキストボックスの入力値をmessageに代入。
});
}
}
应用组件的HTML文件。
<form [formGroup]="formGroup">
<input
type="text"
(input)="inputText()"
[formControl]="inputTextBox"
>
{{message}} <!-- テキストボックスの横に表示させる文字列（変数） -->
</form>
app.module.ts 只需要一个选项。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { InputTextComponent } from './src/shared/components/atoms/input-text/input-text.component';
import { ReactiveFormsModule } from '@angular/forms'; // ReactiveFormを使用するためにimportが必要
@NgModule({
declarations: [
AppComponent,
InputTextComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule, // これも必要。
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
详细解释
app.component.ts -> 组件.ts
import { Component } from '@angular/core';
import { FormControl, FormGroup } from "@angular/forms";
import { debounceTime } from 'rxjs/operators'; // 1．debounceTimeを使用する場合はimportが必要
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
message : any = '';
inputTextBox: FormControl = new FormControl(); // 2．ReactiveFormを定義
formGroup = new FormGroup({
inputTextBox: this.inputTextBox
});
inputText(): void {
this.inputTextBox.valueChanges.pipe( // 3．処理を遅らせるFormControlを指定する
debounceTime(500), // 4．処理を遅らせる時間を指定
).subscribe((value: any) => { // 5．遅らせた処理のvalueに対する処理を設定
this.message = value; // 6．value = テキストボックスの入力値をmessageに代入。
});
}
}
1. 导入 debounceTime
import { debounceTime } from 'rxjs/operators'; // 1．debounceTimeを使用する場合はimportが必要
复制粘贴是可以的。
如果不导入这个，就不能使用。
定义(实现) ReactiveForm
inputTextBox: FormControl = new FormControl(); // 2．ReactiveFormを定義
formGroup = new FormGroup({
inputTextBox: this.inputTextBox
});
在文本框中实现ReactiveForm进行输入。
3.4.5.6 实现 debounce
inputText(): void {
this.inputTextBox.valueChanges.pipe( // 3．処理を遅らせるFormControlを指定する
debounceTime(500), // 4．処理を遅らせる時間を指定
).subscribe((value: any) => { // 5．遅らせた処理のvalueに対する処理を設定
this.message = value; // 6．value = テキストボックスの入力値をmessageに代入。
});
}
对于实现了去抖功能的FormControl，需要实现.valueChanges.pipe()。
好像是通过valueChanges.pipe()可以对输入的值进行处理的样子…
指定了3的管道中的值进行处理后，可以通过指定debounceTime来延迟处理的时间。可以通过参数指定以毫秒为单位的时间。如果是500，那就是0.5秒。
通过以下方式来指定对延迟的value执行的操作：
.subscribe((value: any) => {}
在代码中这样写，实际上会将value输入，并对其施加延迟处理后将其赋值。
在{}中可以使用value进行任意处理。（由于是普通的箭头函数，因此也可以使用任意变量而不是value）
在这个例子中，我们将输入值赋给变量，并在app.component.html中显示该变量。
应用
在订阅中不需要使用value！
↓
也可以使用去抖动来延迟处理
例如，如果处理是在输入完成后的0.5秒后显示验证错误消息，您可以使用以下代码来延迟并显示错误消息。
app.component.ts
inputText(): void {
this.inputTextBox.valueChanges.pipe(
debounceTime(500),
).subscribe((value: any) => {
this.validateStatus = this.inputTextBox.invalid;
});
}
app.component.html的原始内容进行中文释义
<p *ngIf="validateStatus">バリデーションエラー<p>
有时订阅操作可能会延迟，之后会执行订阅内的处理。可以不考虑具体数值，也可以以其他方式使用。※无法确定是否使用了与原本用法不同的方式…
总结
在实现表单延迟处理时使用防抖函数似乎是个不错的选择！还可以创建一个继承自FormControl的新对象，在那里自己实现防抖函数，但这看起来比较麻烦。
当调查了debounce的重要性后，发现了一篇类似于用户在输入中遇到验证错误时感到不满所必需的文章。但是，我在失去焦点时是否出现错误是不可以的吗？我想知道。毕竟，在Angular中实现debounce太麻烦了（如果在失去焦点时进行验证，则可以轻松实现）。听说Vue.js可以使用某个库来轻松实现debounce…
我在学习使用这个debounce函数花了很多时间。
Angular在网上的信息太少了！
而且即使有，也是关于Angular2的信息…太过时了！
难道Angular不太受欢迎吗？
