如何将RXJS运算符应用于FormGroup中的单个FormControl

发布于 2025-01-20 21:14:45 字数 318 浏览 3 评论 0原文

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

我想将一些 rxjs 运算符（例如 debounce、distinctUntilChanged）应用于 searchText 表单控制器，以便我可以使用整个表单值进行 api 调用。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绳情 2025-01-27 21:14:45

您可以通过选择进行控制和管道在订阅之前：

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

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
});

回复收藏 0 原文

乖乖 2025-01-27 21:14:45

我认为最简单的方法是只用要应用运算符的一个字段，然后用当前表单值替换其值：

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

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 => {
    ...
  });

回复收藏 0 原文

~没有更多了~