FabianGosebrink / ngrx-signal-store-todo

7 stars 1 forks source link

How to handle form events and methods with ngrx signals ? #2

Open cheikhnadiouf opened 3 days ago

cheikhnadiouf commented 3 days ago

How (and where) can we implement the form methods like reset fields after submit event ( this.form.reset() ) ? Do we have to use the withHooks function or still get everything done in the component form ?

FabianGosebrink commented 3 days ago

Hey, as the form is very close to the component and itself is not part of the state, you would implement this in the component itself. Nobody else than the component knows about the form. The component eventually maps the data and writes the data from the form to the state in any way, when the user clicked "confirm", "send" whatever your button is named. But the form belongs to the component, therefore all form methods should be in the component as well. "withHooks" is for the lifetime of the state, has nothing to do with the form. Hope this helps :)

cheikhnadiouf commented 3 days ago

Ok thanks but what if the state manage the value of an input form ? how to handle its events in the component form ? (submitted event, errors event from http client service, reset input after api remote service success)

FabianGosebrink commented 3 days ago

I would handle all form methods in the component because that is where the form lives. When submitted, you can write the value to the state. When you call an http service to get the value you can use form.patchValue to reflect the value in the form again. You can also map it if you want before writing on the state. Cheers!