角反应性表格：仅反跳一些特定的表格控件

Question

我有一个简单的搜索组件，其中包含带有2个元素的反应形式：

• 文字输入（搜索任意匹配的文字）
• 复选框（包括/排除已删除的结果）

到目前为止，我使用它myFormGroup.valueChanges.subscribe(...)来执行搜索方法。

现在的问题是，我想对文本输入进行反跳操作。同时不要取消反跳复选框，因此单击该复选框时，搜索方法将立即执行。

valueChanges.debounceTime(500)当然，使用will会反跳整个表单。那不是我想要的

这是一个简化的示例。实际形式还有更多输入。有些应该去抖动，有些则不应该。

有没有简单的方法可以做到这一点？还是我必须分别订阅每个表单控件？

很高兴看到您是如何解决此问题的。

提前致谢。

---

编辑：代码

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

对文本控件的valueChanges可观察值进行反跳，然后将combineLatest()其与复选框控件的valueChanges可观察值组合起来。

简单的例子

Answer 2

表单组中单个控件的去抖动可以通过

   this.form.get('textInput')
  .valueChanges
  .pipe(debounceTime(500))
  .subscribe(dataValue => {
    console.log("dataValue", dataValue);
  });

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

创建每个单独的FormControl，然后将它们添加到表单组中，然后您可以控制每个FormControl可以观察到的valueChanges

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

仅当值不同以发出某些内容时，distinctUntilChanged才能确保。