Menu
I have filtered out few FormControl(s) from a large FormGroup based on some logic now - I'd like to know how can I merge / combine those selected FormControls and have only one subscribe..
I looked into RxJS docs and marble diagrams but didn't understand it properly. It's very confusing to understand all of these and know which one to use for my case:
- forkJoin
- combineLatest
- merge
- join
- zip
Here's more detailed info about the question:
Let's say 2 FormControls (i.e., controlA, controlB). I want to execute my some handlerFunction whenever any of the FormControl value changes.
* It needs to execute my handlerFunction once whenever any control valueChanges (In my case any one control will be changed at one time)
Thanks.
937
reset()linkResets the form control, marking it pristine and untouched , and resetting the value. The new value will be the provided value (if passed), null , or the initial value if nonNullable was set in the constructor via FormControlOptions .
A form control is a user interface control that serves as the point of connection between the user and the server. Interactions vary by control type: buttons: button file handling: input type="file" menus: select , etc.
FormControl and FormGroup in AngularFormGroup is used with FormControl to track the value and validate the state of form control. In practice, FormGroup aggregates the values of each child FormControl into a single object, using each control name as the key.
Every single form control in the form group is identified by name when initializing. FormControl is a class in Angular that tracks the value and validation status of an individual form control.
Just as the control gives you access to the state of an element, the group gives the same access but to the state of the wrapped controls. Every single form control in the form group is identified by name when initializing. FormControl is a class in Angular that tracks the value and validation status of an individual form control.
To add, update, or remove controls in FormGroup, use the following commands: addControl() adds a control and updates its value and validity removeControl() removes a control setControl() replaces an existing control
As you can see, nested form groups are not defined by the assignment statement, but rather with the colon, just like a form control. Reflecting this in the view will look like this: It’s crucial that every name in the model and view match, so make sure you don’t misspell the form control names.
The best option for you is combineLatest that emits after all source Observables emitted at least one value and then on every emission from any source Observable:
Observable.combineLatest(controlA.valueChanges, controlB.valueChanges)
.subscribe(...);
Eventually you can chain each source with startWith(null) to guarantee that every source will emit one item immediately and filter what you want in the subscriber.
Observable.combineLatest(
controlA.valueChanges.startWith(null),
controlB.valueChanges.startWith(null)
)
.subscribe(([val1, val2]) => ...);
Btw, about the other operators:
zip - emits only when all sources emitted the same number of itemsforkJoin - emits when all sources emitted at least one item and completed (never happens with valueChanges)merge - just merges Observables but you can't know which one emitted what valuejoin - I don't think that's part RxJS 5
136
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
