drag and drop angular order not changing

0
votes

i create form builder based on this https://stackblitz.com/edit/angular-dynamic-survey-creation-golkhg, and i use this function for droped

onDrop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.surveyForm.get('surveyQuestions')['controls'], event.previousIndex, event.currentIndex);
}

the questionTitle must changing, but it was not

enter image description here

but in the html it's changing

enter image description here

the order of the array is changing in html, but in my json is not changing, can someone help me?

EDIT

After a while i don't touch this code again, i found some error,please see this before and after images, here's before

Before

"quizQuestions": [
    {
      "questionType": "File Upload",
      "display_order": 1,
      "questionGroup": {
        "questionTitle": "",
        "quizAnswer": ""
      }
    },
    {
      "questionType": "Tanggal",
      "display_order": 2,
      "questionGroup": {
        "questionTitle": "",
        "quizAnswer": ""
      }
    }
  ],

after i dragged the first form, it looks like this

After

"quizQuestions": [
    {
      "questionType": "Tanggal",
      "display_order": 2,
      "questionGroup": {
        "questionTitle": "",
        "quizAnswer": ""
      }
    },
    {
      "questionType": "File Upload",
      "display_order": 1,
      "questionGroup": {
        "questionTitle": "",
        "quizAnswer": ""
      }
    }
  ],

what's is wrong actually? i've tried both of the best solution you guys provide but it's still like this, please help me out. Note: i change surverysQuestions to quizQuestions

3
angularangular-materialangular-cdkangular-cdk-drag-drop

3 Answers

2
votes

You need to add display_order property in your formGroup and you can see order change in that property.

And in onDrop method change the display order of the other questions. something like this:

onDrop(event: CdkDragDrop<string[]>) {
   moveItemInArray(this.surveyForm.get('surveyQuestions')['controls'], event.previousIndex, event.currentIndex);
   this.questionFormArray.controls[event.currentIndex]['controls']['display_priority']
            .setValue(event.currentIndex + 1);
   this.questionFormArray.controls.forEach((category, index) => {
            (category as FormGroup).controls['display_priority'].setValue(index + 1);
   });
}
0
votes

try to add changeDetectionStrategy to your component

https://angular.io/api/core/ChangeDetectionStrategy

0
votes

Method example:

onDrop(event: CdkDragDrop<string[]>) {
   moveItemInArray(this.surveyForm.get('surveyQuestions')['controls'], event.previousIndex, event.currentIndex);
  this.surveyForm.get('surveyQuestions').updateValueAndValidity({ onlySelf: false });
}