Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Subscribe multiple FormControl(s) only once

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.

like image 937
narainsagar Avatar asked Feb 20 '18 09:02

narainsagar


People also ask

What does FormControl Reset do?

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 .

What is a FormControl?

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.

What is the difference between FormGroup and FormControl?

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.

How to identify a single form control in the form group?

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.

What is the difference between form control and form group in angular?

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.

How do I ADD/UPDATE/remove controls in formgroup?

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

How are nested form groups defined in a form 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.


1 Answers

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 items
  • forkJoin - 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 value
  • join - I don't think that's part RxJS 5
like image 136
martin Avatar answered Oct 11 '22 03:10

martin