0

Specific application:

In an Angular (6) component, I have a FormGroup with a valueChanges object of type observable that needs to be directed to an EventEmitter. If this FormGroup were never changing, its valueChanges could be the EventEmitter, but the FormGroup changes (reassigned) in response to a changing combobox.

The FormGroup represents an array of checkboxes.

The EventEmitter is EventEmitter<{ [code: string]: boolean }>.

Presently what is happening is:

this._myFormGroup.valueChanges.subscribe(value => this.myEventEmitter.emit(value));

Because the group is reassigned, and so I don't want to lose any subscriptions on the output event emitter.

EDIT: To clear up exactly what I am hoping for:

I would like a way to have as part of the public interface an @Output() myEventEmitter that is the same instance always (thus maintains subscriptions).

With a form group that changes (note: it is dynamically generated for each change of the combobox) but can feed in its observable into myEventEmitter without having to call emit in a subscribe which some view as a bad practice.

Abdulrahman Falyoun
  • 3,676
  • 3
  • 16
  • 43
Jeffrey Drake
  • 805
  • 10
  • 26
  • What is your question? – dmcgrandle Dec 04 '19 at 18:27
  • You can use the form group in a different form without having to subscribe again. – Reactgular Dec 04 '19 at 18:30
  • @dmcgrandle it was in the title, but added some detail at the end just in case. – Jeffrey Drake Dec 04 '19 at 18:48
  • @Reactgular the form (on the template) is regenerated and the form group is reassigned to the new options needed. There are no other forms. – Jeffrey Drake Dec 04 '19 at 18:49
  • I have a question - are you saying that every time the _myFormGroup is reassigned, then you re-subscribe as well (with the code you showed), which then updates the eventEmitter with the new value? – dmcgrandle Dec 04 '19 at 19:56
  • @dmcgrandle yes (with associated unsubscribe) – Jeffrey Drake Dec 04 '19 at 21:04
  • 2
    Ok then, why not just emit valueChanges? Every time a new one is created, emit it with `this.myEventEmitter.emit(this._myFormGroup.valueChanges)`. This makes your eventEmitter into an observable of observables (higher order), and each inner observable can have multiple values, complete, etc. Your subscriptions on the event emitter will need to be refactored to cope with a higher order Observable. BTW: subscriptions on eventEmitters are also bad practice, see [this](https://stackoverflow.com/a/36076701/8105437) for why... – dmcgrandle Dec 04 '19 at 22:40
  • @dmcgrandle I do want to be able to use as a normal event emitter generally, there are presently no subscriptions on it. But I have looked at that page and see the general arguments. I don't want to have the event emitter being a higher order observable because it seems like a weird interface to provide the parent component. – Jeffrey Drake Dec 04 '19 at 23:06

1 Answers1

0

Why bother with the form group when you could have an event on the template wired up to an event emitter?

<input *ngFor="let value in values; index as i" type="checkbox"
  [checked]="values[i]" (click)="values[i] = !values[i];emit(values)">

and in your component

emit => val => { myEventEmitter.emit(val); }
Adrian Brand
  • 20,384
  • 4
  • 39
  • 60