I am currently subscribed to three FormControl instances named filter1, filter2, and filter3. My goal is to fetch the values of all three whenever any one of them changes. I initially attempted to achieve this using combineLatest, but found that it only emits when all three have emitted values. Then, I tried using merge, but ran into an issue where it only returned the field that had changed.
So, my question is: How can I retrieve an object { filter1, filter2, filter3 } in RxJS?
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);
Please note that I prefer not to use formGroup and would like to find a solution without relying on formGroup.