angularangular-materialangular-material-8

Duplicate items in angular material drag and drop


is there some way in angular material to prevent duplicate items in drop list? here is example code

https://stackblitz.com/edit/angular-xjex4y-43l7uh

I try to check if the item already exists in an array with event.currentIndex but this is not correct, because, sometimes I get the wrong value.

event.container.data.included(event.container.data[event.currentIndex])

In stackblitz i need to use .indexOf() insead od .included(), because something not working


Solution

  • You can check current item using previousIndex and check if item already exist or not if exist then return like

     {
          let idx=event.container.data.indexOf(event.previousContainer.data[event.previousIndex]);
          if(idx != -1){
            return;//if item exist
          }
          copyArrayItem(event.previousContainer.data,
                            event.container.data,
                            event.previousIndex,
                            event.currentIndex);
        }
    

    working demo