Apologies for the lengthy title.
In one of my components, I have an Angular v18 typed form that exposes the ValueChangeEvent as an output event using the outputFromObservable() function:
export class SessionEditFormComponent {
private fs = inject(SessionFormService);
sessionForm: FormGroup<SessionForm> = this.fs.getDefaultForm();
session = input.required<ProgramSession>();
onFormValueChange = outputFromObservable(
this.sessionForm.events.pipe(
filter((e) => e instanceof ValueChangeEvent),
debounceTime(1000),
distinctUntilChanged()
)
);
constructor() {
effect(() => {
if (this.session().title !== undefined) {
console.log('session effect', this.session());
this.fs.patchForm(this.session());
}
});
}
}
The custom function "fs.patchForm()" takes a custom object named session, constructs a new form group with multiple nested form arrays, and returns a NEW form which is then assigned to the component's sessionForm property. The parent component listens for onFormValueChange events like so:
(onFormValueChange)="onFormChange($event)"THE ISSUE:
After reassigning the form in the signal/constructor effect, it disrupts the onFormValueChange observable. The changes are no longer emitted. Removing the effect results in all form events being emitted correctly.
Could someone help me ensure that the change events continue to emit even after assigning a new form to the sessionForm property?
Thank you!