拖放 angular 顺序不变

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

Answer 1

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

Answer 2

try to add changeDetectionStrategy to your component

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

Answer 3

Method example:

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