Form Array sortable with ngx-dnd

[swimlane]

Form Array sortable with ngx-dnd

[NumericFactory]

Ok i found solutions and i give you this one !

1 ngx-dnd events

ngx-dnd library allows us to use many events : drop(), drag(), over(), out(), remove(), cancel()

https://github.com/swimlane/ngx-dnd/blob/master/src/directives/ngx-droppable.directive.ts#L36

So, you can call your own method in your component if an item is "dropped". Example :

in your form.component.html

<div (drop)="dropped($event)" 
     class="ngx-dnd-container" 
     ngxDroppable 
     [model]="formData.controls">
//...

in your form.component.ts

dropped(event) {
    alert('Ok drop is Donne !')
}

2 Update formArray
The problem was here : our "drop action" didn't re-order the formArray
Angualar formArray class expose many methods to solve this problem
https://angular.io/api/forms/FormArray

I choise the reset() method cause we can pass value in parameters and update the entire formArray.

reset(value?: any, options?: Object)

Finally, update your méthod in your form.component.ts

dropped(event) {
    let linesCopy = [];
    this.lines = this.form.get('lines') as FormArray;
    for(let line of this.lines.controls) {
        linesCopy.push(line.value);
    }
    console.log(linesCopy);
    console.log(this.lines.value);
    this.lines.reset(linesCopy);
}

Oh It works correctly now ! You can check here =>
https://angular-xqhjug.stackblitz.io

PS: Be careful to use only form class methods when you manipulate forms in Angular. Dont'use JS methods to push, remove, set value, etc...
formArray Class => https://angular.io/api/forms/FormArray

Frederic LOSSIGNOL, leadDev from Paris, France