Store: 馃殌[FEATURE]: UpdateFormValue not working properly on FormArray

Created on 10 Mar 2019  路  5Comments  路  Source: ngxs/store

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => https://github.com/ngxs/store/blob/master/CONTRIBUTING.md
[ ] Other... Please describe:

Current behavior


When trying to use the UpdateFormValue command over an array index (included in a form group) using the path 'names.list.0' then the value is appended to the root form group instead of actually updating the array, please check the following Stackblitz:

https://stackblitz.com/edit/ngxs-forms-updateformvalue-nested-array-error

Expected behavior

The command should update the FormControl properly, interestingly when using the FormArray directly as root state, the command works properly, please check this Stackblitz for the working version:

https://stackblitz.com/edit/ngxs-forms-updateformvalue-nested-array-error-lemcra

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/ngxs-forms-updateformvalue-nested-array-error

1- Click on update name to execute the command.

Environment


Libs:
Please check libs used in Stackblitz


Browser:
- [x] Chrome (desktop) version 72.0.3626.121
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Platform: Windows 

Others:

plugins released

Most helpful comment

I have the same issue, I believe this was not fixed.

I have an ArrayForm in the form and I am using updateFormValue(data) where the data include an array of 3 items.

In ngxs devtools I noticed that update action is triggered twice or three times without an extra action from my side.

in the first update action the form is updated with the values properly. then another update value is triggered again automatically that removes the array of 3 items and set it to one item in the array.

Though this isn't the original issue of the OP, we are currently also having a similar issue as described by @MurhafSousli

Basically, if you have a form array which represents an array in the store and then update that array with ctx.patchState(newArray) via a store action - then the new value will be immediately deleted from the store after the action is completed

You can see this behaviour in the following stackblitz:
https://stackblitz.com/edit/dynamic-formarray-g3dcg8

What we would like to achieve is that you click the button which updates the array in the state and for every entry in the array a new input is shown.

But if you click the button, an action is correctly triggered which updates the array in the store, but there are no new form controls in the form.

If you inspect the store via Redux plugin, you can see that the custom action updates the store, but immediatly afterwards the store is updated again by the [FORM] actions and the array is removed:
01
02

@arturovt Is there a way to achieve the desired behaviour without losing the array?

All 5 comments

I have the same issue, I believe this was not fixed.

I have an ArrayForm in the form and I am using updateFormValue(data) where the data include an array of 3 items.

In ngxs devtools I noticed that update action is triggered twice or three times without an extra action from my side.

in the first update action the form is updated with the values properly. then another update value is triggered again automatically that removes the array of 3 items and set it to one item in the array.

@MurhafSousli could you create a _minimal reproducible example_, please?

I have the same issue, I believe this was not fixed.

I have an ArrayForm in the form and I am using updateFormValue(data) where the data include an array of 3 items.

In ngxs devtools I noticed that update action is triggered twice or three times without an extra action from my side.

in the first update action the form is updated with the values properly. then another update value is triggered again automatically that removes the array of 3 items and set it to one item in the array.

Though this isn't the original issue of the OP, we are currently also having a similar issue as described by @MurhafSousli

Basically, if you have a form array which represents an array in the store and then update that array with ctx.patchState(newArray) via a store action - then the new value will be immediately deleted from the store after the action is completed

You can see this behaviour in the following stackblitz:
https://stackblitz.com/edit/dynamic-formarray-g3dcg8

What we would like to achieve is that you click the button which updates the array in the state and for every entry in the array a new input is shown.

But if you click the button, an action is correctly triggered which updates the array in the store, but there are no new form controls in the form.

If you inspect the store via Redux plugin, you can see that the custom action updates the store, but immediatly afterwards the store is updated again by the [FORM] actions and the array is removed:
01
02

@arturovt Is there a way to achieve the desired behaviour without losing the array?

hey @splincode, since this ticket is already closed. could you check @Melechoris reply and reopen the ticket?

The forms plugin has been great thus far, and then I've run into this issue with FormArray. Is there any hope that this will be patched in a future release?

Was this page helpful?
0 / 5 - 0 ratings