[英]Angular Reactive Forms: Debounce only some specific Form Control
我有一个简单的搜索组件,其中包含一个带有 2 个元素的反应式表单:
到目前为止,我使用myFormGroup.valueChanges.subscribe(...)
来执行我的搜索方法。
现在的问题是,我想去抖动文本输入。 并且同时不去抖动复选框,因此当单击复选框时搜索方法会立即执行。
使用valueChanges.debounceTime(500)
当然会消除整个表单的抖动。 那不是我想要的。
这是一个精简的例子。 真实的形式有更多的输入。 有些应该去抖,有些不应该。
有什么简单的方法可以完成这项工作吗? 还是我必须分别订阅每个表单控件?
很高兴看到你是如何解决这个问题的。
提前致谢。
export class SearchComponent {
myFormGroup: FormGroup;
constructor(fb: FormBuilder) {
this.myFormGroup = fb.group({
textInput: '',
checkbox: false
});
}
ngOnInit() {
this.myFormGroup.valueChanges.subscribe(val => {
// debounce only the textInput,
// and then execute search
});
}
}
在将它们添加到表单组之前创建每个单独的 FormControl,然后您可以控制每个 FormControl 可观察到的 valueChanges
this.textInput.valueChanges
.pipe(
debounceTime(400),
distinctUntilChanged()
)
.subscribe(res=> {
console.log(`debounced text input value ${res}`);
});
distinctUntilChanged 将确保只有当值不同时才会发出某些东西。
去除文本控件的valueChanges
可观察值,然后使用combineLatest()
将其与复选框控件的valueChanges
可观察值结合起来。
表单组中单个控件的去抖可以通过
this.form.get('textInput')
.valueChanges
.pipe(debounceTime(500))
.subscribe(dataValue => {
console.log("dataValue", dataValue);
});
现在我遇到了那个问题,我按如下方式解决了!
// Reactive control
fieldOne = this.formBuilder.control('');
// Reactive form
formGroup = this.formBuilder.group({
fieldOne: [],
fieldTwo: [],
fieldX: [],
});
this.fieldOne.valueChanges
.pipe(debounceTime(300))
.subscribe(value => {
this.formGroup.get('fieldOne').setValue(value);
});
您在表单组内的控件中具有响应速度,并且从单个控件发出的事件有延迟,希望将来 formGroup 发出的 valueChanges 将呈现触发事件的控件并能够在可观察的
问候!
GitHub 上有一个问题,将来可能(?:)解决这个问题:
https://github.com/angular/angular/issues/19705
然后应该可以(就像在 AngularJS 中一样)去抖动单个输入字段。
我遇到了同样的问题,在我的例子中,创建了一个新的 Input 组件并在 html 中提供了 debounce 值解决了没有任何自定义代码的问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.