Angular - How to reorder items in FormArray?

Discussão em 'Angular' iniciado por SBB, Março 18, 2025.

  1. SBB

    SBB Guest

    I have a large form that contains a bunch of controls. Within this form, I have an array of form groups which are my "rules".

    I need to add the ability to change the order of the rule, not only its value but its visual place in the DOM.

    Here is what my setup looks like:

    [​IMG]

    Each one of those rules is a component that has its own form groups etc. The order they are initially displayed is based on their current stored processing order value.

    Below each rule I have a button to move the rule up or down which is what I am working on.

    With reactive forms, does the index of a form group determine its position in the component UI? For example, if I wanted to move a rule up, could I change that form groups index to currentIndex-1 and perhaps the rule above to +1 in order to change places?

    My goal here is to be able to move those components up and down on the UI. I am trying to stay away from a drag and drop library due to the amount of rules on this page.

    Update:

    Here is a plunker of my setup:

    https://plnkr.co/edit/S77zywAa7l900F0Daedv?p=preview

    Continue reading...

Compartilhe esta Página