FormArrary Delete not working at index level removeAt(index) are we have any solutions to delete by index

[sathishobili]

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[bietkul]

You can check the working example of removeAt here

[jfrader]

@bietkul actually that example shows exactly the problem I'm having. Try to add to new items to the array, then type "A" as the first item's name, then " B" as the second item's name. Then try to delete the first item, you will se that the B item is removed.

[michal-filip]

I've checked this as I'm considering usage of this library and this is something I'd run into very soon. The underlying values are correct, the removeAt method works as it should (the source is ported from angular very precisely, and there it works splendidly). It's the rendering which is problematic here.

See the part where controls are iterated - the key prop for each element is the index. This means that since indexes don't change when mutating the controls array, the fields don't re-render either. Changing the key to something like key={Math.random() * 10000} made it work (ugly, but proves the point).

I'll try to come up with something smarter as soon as I have a similar scenario in my app.

[mojtaba-ramezani]

Hi When will this bug be resolved? @bietkul @michal-filip I'm also investigating to fix the problem.

[bietkul]

Hey @mojtaba-ramezani It is an issue with React keys, the keys should be unique while rendering a list. I updated the example, please check it.

[mojtaba-ramezani]

Thankful. The problem is fixed in example @bietkul please close this issue

[MartinJesu]

The above example will work for single remove. My case i want to remove multiple FormControls from FormGroup then need to push new multiple FormControls in the same FormGroup. At that time removeAt will not worked.

If i loop through my FormGroup & try to use removeAt it will execute only one time then break the loop, also i have other logic codes below that also not executable.

I tried like below code,

control.meta.currentForm.controls['dynamicSelector']['controls'].forEach((child, index) => { child.removeAt(index); });

[abhaysoftskill]

removeAt is getting issues with using React Hook, also if I tried to generate a from using Json structure, component not getting rerender. Thanks in Advance @bietkul