Performing side effects on NGXS Forms UpdateFormValue

Question

My application uses NGXS Forms Plugin and I'd like to trigger certain API calls when a value in my form changes.

Is this correct to do the following? If not, what would be the recommended way to do so?

@Action(UpdateFormValue)
public doStuff(ctx: StateContext<any>, { payload }: UpdateFormValue) {
    // logic
}

This seems to work, but then I'm unable to see update forms value action in Redux developer tools, which makes me wonder if I am doing it right.

Answer 1

Yes, you're on the right track!

NGXS dispatches UpdateFormValue under the hood after valueChanges stream emits any event, basically, there is nothing supernatural :D

My only comment is you would want to cancel previously uncompleted asynchronous job when the new UpdateFormValue action is dispatched, so you've got to use cancelUncompleted option:

@Action(UpdateFormValue, { cancelUncompleted: true })
public doStuff(ctx, action) {}

---

Also, the UpdateFormValue action is not dispatched immediately as the valueChanges stream is piped via debounceTime . If you don't want this stream to be piped via debounceTime you have to provide ngxsFormDebounce binding that should be less than 0 , something like:

<form ngxsForm="blah-blah" [ngxsFormDebounce]="-1">

Or you can explicitly set updateOn option of your FormGroup to the blur or submit , then debounceTime will be also ignored.