Angular Reactive Forms：僅對某些特定的表單控件進行反跳

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 可觀察到的 valueChanges

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

distinctUntilChanged 將確保只有當值不同時才會發出某些東西。

Answer 2

去除文本控件的valueChanges可觀察值，然后使用combineLatest()將其與復選框控件的valueChanges可觀察值結合起來。

簡單例子

Answer 3

表單組中單個控件的去抖可以通過

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

Answer 4

現在我遇到了那個問題，我按如下方式解決了！

// 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 5

GitHub 上有一個問題，將來可能(?:)解決這個問題：

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

然后應該可以（就像在 AngularJS 中一樣）去抖動單個輸入字段。

Answer 6

我遇到了同樣的問題，在我的例子中，創建了一個新的 Input 組件並在 html 中提供了 debounce 值解決了沒有任何自定義代碼的問題