I've a form where user can drag selected img and drop it in target location and submit the form to backend.
Source data is Array of Object(API),
Issue:
- when drag one item and put it in drag location, the item gets multiplied / duplicated - (objects in array duplicated)
- when dragged item moved back to its original position, again it gets duplicated (objects in array duplicated)
- when when hit the submit form, its not only showing lot of duplicated items
Expectation:
drag and drop only selected items and submit the form.
ngOnInit() {
this.initTestForm();
}
ngAfterViewInit() { }
initTestForm() {
this.myTestForm = this.fb.group({
// myDivName: new FormControl(this.containerData),
myDivName: new FormControl(this.containerData),
});
}
drop(event: CdkDragDrop<Item[]>) {
if(event.previousContainer === event.container) {
moveItemInArray(
event.container.data,
event.previousIndex,
event.currentIndex
);
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
console.log(
'transferArrayItem',
event.container.data[event.currentIndex]
);
this.addItem(event.container.data[event.currentIndex]);
}
}
get myDivName() {
return this.myTestForm.get('myDivName') as FormArray;
}
addItem(item: any) {
this.basket.push(item);
this.myDivName.push(this.fb.control(item));
}
removeItem() {
this.basket.pop();
this.myDivName.removeAt(this.myDivName.length - 1);
}
savedata() {
console.log(this.myTestForm);
}
Since my scenarios is bit different, i couldn't find any solutions from SO