🚀[FEATURE]: UpdateFormValue not working properly on FormArray

[CheckMater]

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:

[MurhafSousli]

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.

[arturovt]

@MurhafSousli could you create a minimal reproducible example, please?

[Melechoris]

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:

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

[stemda]

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

[benbabics]

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?

[chickencoding123]

The array objects are not acceptable for angular setValue or patchValue. Angular requires a predefined FormArray, but the community has introduced a workaround to initialize with an empty new FormArray([]) and then push FormGroups into it. This cannot be done in ngxs because there's no way of knowing what other parameters to pass to new FormGroup and new FormControl (remember FormGroup also needs FormControl to work). Now we may be able to use the FormBuilder, but that still leaves us with the extra parameters problem. For example consider a scenario where elements in the array have a name property that needs a Validators.required so we can validate the attached <input>. How can ngx tell this?! It only receives a JS object and blindly pass it to angular, but then angular drops the array value since it is a vanilla and not an instance of an FormArray.

I'm all up for fixing it so it works automatically, but I don't see a way forward. Ngxs is unaware of all additional parameters that are passed to angular forms while angular's built-in setValue and patchValue do not do this work.

[markwhitfeld]

Closing this issue because:

• it has digressed from the original issue that was logged
• there isn't a clear proposal on how NGXS would be able to construct the FormArray correctly for the user's app

If anybody comes up with a decent proposal, please feel free to open a new issue to discuss the proposal.