Reactive form working so weird with Angular DropnDrop CDK - Items getting duplicated

Question

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);
}

stackblitz - issue reproduced

Since my scenarios is bit different, i couldn't find any solutions from SO

Flavio · Accepted Answer · 2022-07-02 06:23:56Z

3

Finally, I fixed my issue by myself, by doing little modification like below.

initialize formControlName like myDivName: this.fb.array([]),

 get myDivName() {
    return <FormArray>this.myTestForm.get('myDivName');
  }

inside drop() method assign and pass formValue

const formArry = this.myDivName;
formArry.insert(0,this.fb.control(event.container.data));

working demo

Note: I'm not sure how efficient the fix is, but will optimize it as much as can.

Thanks to all who atleast view my question

answered Jul 2, 2022 at 6:23

Flavio

1232 silver badges14 bronze badges

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

2 Comments

Mr. Learner Over a year ago

Try this to filter you final data source filter

Eliseo Over a year ago

really not (if you drop out you need remove not add). Use a FormControl and use this.myTestForm.get('myDivName').setValue(event.container.data). Yes a FormControl can store an array of object.

Collectives™ on Stack Overflow

Reactive form working so weird with Angular DropnDrop CDK - Items getting duplicated

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related