Angular CDK drag drop with (reactive) forms

Question

I have this example : https://stackblitz.com/edit/angular-asevei?file=app%2Fcdk-drag-drop-sorting-example.html

everything works, but while dragging the selectbox 'resets' to the first value in the list.

is there any way to fix this? It's only visual, but quite jarring for the user. I have tried using the cdkDragPreview option, but couldn't get it to work.

Component:

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
    selector: 'cdk-drag-drop-sorting-example',
    templateUrl: 'cdk-drag-drop-sorting-example.html',
    styleUrls: ['cdk-drag-drop-sorting-example.css'],
})
export class CdkDragDropSortingExample {

    myForm: FormGroup;

    constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
        title: ['title'],
        items: fb.array([
        fb.group({
            name: fb.control('1'),
            note: fb.control('quux')
        }),
        fb.group({
            name: fb.control('2'),
            note: fb.control('bar')
        }),
        fb.group({
            name: fb.control('3'),
            note: fb.control('baz')
        })

        ])
    })
    }

    drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.myForm.get('items').controls, event.previousIndex, event.currentIndex);
    moveItemInArray(this.myForm.get('items').value, event.previousIndex, event.currentIndex);
    }
}

Template:

<form [formGroup]="myForm">
    <input formControlName="title" />
    <div cdkDropList id="foo" class="example-list" (cdkDropListDropped)="drop($event)">
        <div class="example-box" *ngFor="let item of myForm.get('items').controls" cdkDrag>
            <span cdkDragHandle>drag</span>
            <div [formGroup]="item">
                <input type="text" formControlName="name">
                <select formControlName="note">
                    <option>foo</option>
                    <option>bar</option>
                    <option>baz</option>
                    <option>quux</option>
                </select>
            </div>
        </div>
    </div>
    {{ myForm.value | json }}
</form>

how did your drag n drop form project evolve. I'm working on a similar project. Would you like to chat ? — Andre Elrico
– Andre Elrico, Commented Nov 17, 2018 at 21:48

Jessy · Accepted Answer · 2018-11-21 01:59:41Z

8

I have revised @Amir Fawzy's answer by adding a variable in getting the current active note which shows upon dragging the selected box.

TS:

activeNote: string;
enter(i) {
  this.activeNote = this.myForm.get('items')['controls'][i].get('note').value;
}

HTML:

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div [id]="i" class="example-box" *ngFor="let item of myForm.get('items').controls; let i=index;" cdkDrag #elem="cdkDrag" (mouseenter)="enter(i)">
    <span cdkDragHandle>drag</span>
    <div [formGroup]="item">
      <input type="text" formControlName="name">
      <select formControlName="note">
        <option [hidden]="elem.moved">{{activeNote}}</option>
        <option>foo</option>
        <option>bar</option>
        <option>baz</option>
        <option>quux</option>
      </select>
    </div>
  </div>
</div>

Here's a duplicate on Stackblitz..

edited Nov 21, 2018 at 1:59

Jessy

1,22718 silver badges29 bronze badges

answered Nov 9, 2018 at 0:19

KimCindy

1,2091 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tech-no-logical Over a year ago

both yours and @Amir Fawzy's answers led me to a slighly different solution shown here : stackblitz.com/edit/angular-asevei-wwblpi?file=app/… using the activeNote option with the *cdkDragPreview directive and the (cdkDragStarted) event. thanks !

KimCindy Over a year ago

*cdkDragPreview is another great option. We're just focused on the display at the selectbox. Anyways, glad I could help :)

Jessy Over a year ago

@tech-no-logical I believe you could report this as a bug on the github repo: github.com/angular/material2/issues I wouldn't expect the selects to react this way at all. Im looking into it myself with little luck as to why it's happening. The preview is a nice work around though.

Amir Fawzy · Accepted Answer · 2018-11-08 16:26:05Z

your code is fine nothing wrong with it but this issue if called it so, caused by drag-drop cdk as this's the default behavior as i know but you can work around to enhance that behavior to make it looks good to the user.

try this

<div class="example-box" *ngFor="let item of myForm.get('items').controls" cdkDrag #elem="cdkDrag">
  <span cdkDragHandle>drag</span>
  <div [formGroup]="item">
    <input type="text" formControlName="name">
    <select formControlName="note">
      <option [hidden]="elem.moved">dragging...</option>
      <option>foo</option>
      <option>bar</option>
      <option>baz</option>
      <option>quux</option>
     </select>
  </div>
</div>

what happened here to things #elem="cdkDrag" added to drag element as local reference
and <option [hidden]="elem.moved">dragging...</option> what gonna happen here is when the user drag the element dragging select option will show in select input when user end the dragging it will hide again and select input value will set again with some css it will looks good.

Michał Różycki · Accepted Answer · 2020-07-16 07:19:54Z

0

It seems that mat-select from Angular Material works fine, see https://ngfelixl.github.io/ng-libraries

answered Jul 16, 2020 at 7:19

Michał Różycki

3373 silver badges8 bronze badges

Collectives™ on Stack Overflow

Angular CDK drag drop with (reactive) forms

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related