如何使用 RxJS 从 Angular 中的多个 FormControl 实例检索值？

Question

我订阅了

filter1

、

filter2

和

filter3

，它们都是

FormControl

实例。每当其中至少一个发生变化时，我想检索所有三个的值。最初，我尝试使用

combineLatest

，但我注意到它仅在所有它们都发出值时才发出。然后，我尝试使用

merge

，但遇到了一个问题，它只返回发生更改的字段。

那么，如何使用 RxJS 获取对象

{ filter1, filter2, filter3 }

？

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { merge } from 'rxjs';
import { map } from 'rxjs/operators';
console.clear();

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, ReactiveFormsModule, CommonModule],
  template: `
 <input [formControl]="filter1">
 <input [formControl]="filter2">
 <input [formControl]="filter3">
  `,
})
export class App {
  name = 'Angular';

  filter1 = new FormControl();
  filter2 = new FormControl();
  filter3 = new FormControl();

  constructor() {
    merge(
      this.filter1.valueChanges.pipe(map(value => ({ filter1: value }))),
      this.filter2.valueChanges.pipe(map(value => ({ filter2: value }))),
      this.filter3.valueChanges.pipe(map(value => ({ filter3: value })))
    ).subscribe((x) => {
      console.log(x);
    });
  }
}

bootstrapApplication(App);

请注意，我不想使用

formGroup

并且我想知道如何在不使用

formGroup

的情况下做到这一点。

堆栈闪电战

Answer 1

运算符

combineLatest

是正确的方法，但您需要首先对每个可观察量使用

startWith

运算符来提供初始值。如果您不希望所有过滤器都为空的初始值，您还可以将

combineLatest

的结果通过

skip(1)

进行管道传输。

import { Component } from '@angular/core';
import { ReactiveFormsModule, FormControl } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import { startWith, combineLatest } from 'rxjs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <input [formControl]="filter1" />
    <input [formControl]="filter2" />
    <input [formControl]="filter3" />
  `,
})
export class AppComponent {
  filter1 = new FormControl();
  filter2 = new FormControl();
  filter3 = new FormControl();

  constructor() {
    combineLatest({
      filter1: this.filter1.valueChanges.pipe(startWith('')),
      filter2: this.filter2.valueChanges.pipe(startWith('')),
      filter3: this.filter3.valueChanges.pipe(startWith('')),
    }).subscribe((x) => {
      console.log(x);
    });
  }
}

bootstrapApplication(AppComponent);