Angular 5 : formArray et drag n drop

Par FactureHero.com, il y a 8 ans

Javascript

J'essaye de jouer avec formArray sur Angular 5 ET la librairie ngx-dnd
L' utilisateur peut :

// ... into the forms : my formArray "lines" (formData is a getter which returns this.form.get('lines'); <div class="ngx-dnd-container" ngxDroppable [model]="formData.controls"> <div class="ngx-dnd-item" ngxDraggable [model]="line" formArrayName="lines" *ngFor="let line of formData.controls; let i = index;"> <div [formGroupName]="i"> <textarea formControlName="linedescription"></textarea> </div> </div> </div>

TESTER ICI : https://angular-xqhjug.stackblitz.io
VOIR LE CODE DANS L EDITEUR : https://stackblitz.com/edit/angular-xqhjug

Le probleme :

Questions :
1 Connaissez-vous une manière appropriée d'utilier la librairie ngx-dnd avec le formArray d'Angular
2 Est-ce que ngx-dnd expose une méthode "callback" qui se déclenche après le drop

Thanks.
Fred

4 réponses

keulu, il y a 8 ans

si j'en croit leurs page de démo https://github.com/swimlane/ngx-dnd/blob/master/demo/app.component.html#L413

il est possible d'avoir des callbacks

<ngx-dnd-container class="root-container" [model]="targetBuilderTools" dropZone="builder-target" [removeOnSpill]="true" [droppableItemClass]="droppableItemClass" (drag)="log($event)" (drop)="log($event)" (over)="log($event)" (out)="log($event)" (remove)="log($event)">

pour le reste, je maitrise trop peur angular 5 pour te répondre sur le formArray

FactureHero.com, il y a 8 ans

HEllo @Keulu,
Pour Angular, ça va je maîtrise pas trop mal la bête :)
En revanche je n'avais pas vu ce code dans leur démo. Merci.

Je teste et je fais un feedback.

FactureHero.com, il y a 8 ans

Effectivement @Keulu, tu as eu l'oeil ! :)
Je confirme que la librarie permet d'utiliser les callBacks en appelant une méthode déclenchée par les évènements :
drop(), drag(), over(), out(), remove(), cancel()

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

Il suffit d'invoquer ces évènements comme n'importe quel évenement en angular, comme un attribut d'une balise HTML, on lie l'évenement à une méthode que l'on créee et hop c'est réglé.

=> form.component.html

//..... formArray <div (drop)="dropped($event)" class="ngx-dnd-container" ngxDroppable [model]="formData.controls"> <div class="ngx-dnd-item has-handle" ngxDraggable [model]="line" formArrayName="lines" *ngFor="let line of formData.controls; let i = index"> <div [formGroupName]="i"> <textarea (keyup)="getFormValueWhenUserIsTyping()" formControlName="linedescription"></textarea> </div> <button title="Supprimer" class="trashline" (click)="deleteItemLine($event, i)">-</button> <button title="Déplacer" class="moveline" ngxDragHandle>Move</button> </div> <!-- FIN formArrayName="lines" --> </div> <button (click)="addItemLine($event)" class="d-block"> <span>+ Ajouter une ligne</span> </button>

=> form.component.ts

dropped(event) { alert('ok le drop est fait'); }

https://angular-xqhjug.stackblitz.io

Avec ça je vais pouvoir me débrouiller pour mettre à jour le modèle de mon formulaire à chaque drag & Drop.

Merci à toi @Keulu, t'as gagné un "sujet résolu" :)

keulu, il y a 8 ans

de rien ;)