Angular 5 : formArray et drag n drop

FactureHero.com
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 :

  • Le déplacement d'une ligne dans le formArray "lines" fonctionne correctement SI l'utilisateur saisi qq chose dans le formulaire après son drag&drop
  • Le déplacement d'une ligne dans le formArray "lines" ne fonctionne pas SI l'utilisateur ne fait QUE son drag&Drop

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
Réponse acceptée

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
Auteur
Réponse acceptée

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" :)

FactureHero.com
Auteur

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.

keulu

de rien ;)