🚀[FEATURE]: Include PropertyPath to NGXS Form Plugin Directive #1905
Replies: 2 comments
-
@jermylucas Interesting suggestion! Unless you are saying that they would all be under the same The alternative to this is to have these 3 forms target 3 different properties in the state and therefore they will have their own form |
Beta Was this translation helpful? Give feedback.
-
@markwhitfeld Thanks for the reply and for the great question. That's a very valid point. When I created the issue, I had assumed that the To answer your question though, I would assume that the I saw a clear simplification of the form values in the state, but it seems like:
|
Beta Was this translation helpful? Give feedback.
-
Relevant Package
@ngxs/form-plugin
Description
NGXS Forms already have the
propertyPath
parameter that can be used on the form Update actions. I would like to request that this is added to thengxsForm
directive. This may resolve a few potential problems with the current form plugin, as well as make things slightly more flexible for those occasions where the directive is used.Describe the problem you are trying to solve
If I have a multi-step form split up into multiple components, where I want each component to manage the smaller form group, but I want all the values updated on the state, I am unable to break things up and using the
ngxsForm
directive does not allow this to be done properly. For example, say in my NGXS state I have:But I have the steps broken out into three components:
customer.component
,product.component
, andcheckout.component
. For validation, I want to simply use a form group on each component, but update the entire form value in the store. If I were to usengxsForm="...productForm"
on each component, the values in the model would be reset each time the page changes, and they would not be nested in objects as intended through the interface. If I wanted to do something likengxsForm="...productForm.customerInfo"
, then of course a new path and model is created.Angular also allows nested form groups. If the same above example was done with a "main" form group, like:
and then I had my HTML as:
Where each component in the outlet has the respective form groups, then ngxs would trigger an infinite loop of updates.
I believe this would fix these problems, and possibly a few others.
Describe the solution you'd like
There could be an optional property added to the directive, something like
ngxsFormPropertyPath
, where the directive will take this into account while doing the updates on form changes. Or, it could be added to the directive as it already is. For the above examples, maybe something like:ngxsForm="...productForm['customerInfo']"
where it is an optional value to the path, and the directive is able to use it in the updates. Currently is is like so in thedirective.ts
, but with changes, the property path would be here too:I believe this is not too complex of a feature, since
propertyPath
is already valid in NGXS.I do not know if this solves the nested form group issue, or issues like #1822 . However, it gives more flexibility to use propertyPath in the above circumstances, as well as form arrays, to update groups inside the form rather than changing or resetting the entire form property.
Describe alternatives you've considered
I am currently using a simple workaround. With the multi-component example, I am subscribing to
valueChanges
of the form, and updating the state with the property path every time something on the form changes:This is working as expected. I could add the
UpdateFormStatus
andUpdateFormDirty
too, but it seems like a built in solution to the directive would also make sense.Beta Was this translation helpful? Give feedback.
All reactions