How to apply rxjs operators to a single formcontrol in a formgroup-CodePudding

filterForm = this.fb.group({
    filterType: [''],
    filterValue:['']
    searchText:['']
  });
this.filterForm.valueChanges.subscribe(res=>{
      console.log(res); //some backend call
});

I want to apply few rxjs operators like debounce, distinctUntilChanged only to searchText form controller so that I can make api call using the whole form value.

CodePudding user response：

You can do it with a get for select the control and a pipe before the subscribe:

filterForm = this.fb.group({
    filterType: [''],
    filterValue:['']
    searchText:['']
  });
this.filterForm.get('searchText').valueChanges.pipe(
      distinctUntilChanged(),
      debounce(500),
)
.subscribe(res=>{
      console.log(res); //some backend call
});

CodePudding user response：

I think the easiest way is piping only the one field where you want to apply the operators and then replace its value with the current form value:

this.filterForm.get('searchText').valueChanges.pipe(
  .pipe(
    distinctUntilChanged(),
    debounce(N),
    map(() => this.filterForm.value),
  )
  .subscribe(res => {
    ...
  });