角度反应形式：仅对某些特定形式控制进行去抖动

Question

我有一个简单的搜索组件，其中包含一个包含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
    });
  }

}

Answer 1

在将每个FormControl添加到表单组之前创建每个FormControl，然后您可以控制每个FormControl可观察的valueChanges

this.textInput.valueChanges
      .pipe(
        debounceTime(400),
        distinctUntilChanged()
      )
      .subscribe(res=> {
        console.log(`debounced text input value ${res}`);
      });

distinctUntilChanged只有在值不同时才能确保发出一些东西。

Answer 2

表单组中单个控件的反跳可以通过

完成

Human

Answer 3

现在我遇到了这个问题，我按如下方法解决了！

// 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将呈现触发该事件并能够使用的控件过滤可观察的

致谢！

Answer 4

撤消文本控件的valueChanges可观察对象，然后使用combineLatest()将其与复选框控件valueChanges可观察对象合并。

Simple example

Answer 5

GitHub上存在一个问题，未来可能会（?!）解决这个问题：

https://github.com/angular/angular/issues/19705

然后应该可以（比如在AngularJS中）去抖动单个输入字段。