ngrx-forms | Enhance your forms in Angular applications with the power | State Container library

Author of ngrx-forms here.

This is not an issue with ngrx-forms per se, but more a general question of how to prevent double initialization when state is in the store, and therefore not coupled to a component's lifetime.

I see multiple options here:

1. reset the form in ngOnDestroy by dispatching a SetValueAction with an initial value as well as a ResetAction (or create your own custom action to recreate the form state in the reducer); this emulates the behaviour of @angular/forms where a form lives only as long as the owning component; here's how that could look like with a custom action with ngrx v8+:

Author of ngrx-forms here.

Instead of trying to debounce values before reaching the store, I would suggest you debounce the value before any observable side-effect occurs. The core model of ngrx-forms is to keep the state and view in sync.

For example, similar to your example from @angular/forms you can use the following to debounce a form value:

Author of ngrx-forms here.

The following should work (using ngrx v8+). I also recommend you create your actions with ngrx v8+ style, otherwise you cannot properly use the modern reducer style.

onNgrxForms() only checks for forms at the top level of the feature state object. It wasn't updating my state because I had the form at data.form since we split state into ui/data. I had to hoist it up a level. Alternatively you can write your own implementation of onNgrxForms().