drag and drop angular order not changing

Question

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

but in the html it's changing

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

"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

"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

score 2 · Accepted Answer · answered Apr 13 '20 at 06:59

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

score 0 · Answer 2 · answered Apr 13 '20 at 05:27

0

try to add changeDetectionStrategy to your component

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

answered Apr 13 '20 at 05:27

Shlok Nangia

2,355
3
16
24

1

something like this https://alligator.io/angular/change-detection-strategy/? – naoval Apr 13 '20 at 05:33

score 0 · Answer 3 · edited May 15 '20 at 14:33

0

Method example:

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

edited May 15 '20 at 14:33

S.Daineko

1,790
1
20
29

answered May 15 '20 at 11:00

Umit Karasu

11

Its much better when you left any comments for your answer – S.Daineko May 15 '20 at 12:25
whats the different with gourav solution? – naoval May 16 '20 at 02:40
updateValueAndValidity allows you to modify the value of one or more form controls and the flag allows you to specify if you want this to emit the value to valueChanges subscribers. After moveItemInArray method you need to use updateValueAndValidity method, no need to do it manually. – Umit Karasu May 19 '20 at 18:45
hey i just try your solution, but both of you and the other guys solution it's a bit strang in view, in json it's perfect though, please see my EDIT really need your help – naoval Aug 02 '20 at 15:25

drag and drop angular order not changing

3 Answers3