Dragable forms and save the data to json file

Question

i want to make this https://stackblitz.com/edit/angular-dynamic-survey-creation-golkhg be dragable and save to json file, so i can make a view for the data, i've use angular cdk but i'm stuck in this function

onDrop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.items, event.previousIndex, event.currentIndex);
  }

i can't find a variable to replace this.items , can someone help me? and of course i want to store the data to json file

score 1 · Accepted Answer · answered Apr 13 '20 at 04:25

1

To do so, you have to upgrade your cdk version to 7.3.7 as this functionality was released in that version.

After that in your question this.items needs to be replaced by

this.surveyForm.get('surveyQuestions')['controls']

Then this function will look like as below:

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

answered Apr 13 '20 at 04:25

Gourav Garg

2,856
11
24

i currently use that version, and thanks for the answer, but how to make it animated like this https://material.angular.io/cdk/drag-drop/overview ? – naoval Apr 13 '20 at 04:37
and in my json, it doesn't change the order – naoval Apr 13 '20 at 05:17
No it will not change any order in your json. If you want main display in json too. You need to add display_order property in your questions. – Gourav Garg Apr 13 '20 at 05:30
how exactly to do that? someone told me about this too https://alligator.io/angular/change-detection-strategy/ – naoval Apr 13 '20 at 05:34
Can you update this stackblitz with angular 7? I will update this code – Gourav Garg Apr 13 '20 at 05:35
https://stackblitz.com/edit/angular-38vdnx?file=src%2Fapp%2Fapp.component.html – naoval Apr 13 '20 at 06:09
heres a simple version – naoval Apr 13 '20 at 06:09
1

see this https://stackblitz.com/edit/angular-iranzm?file=src/app/app.component.ts – Gourav Garg Apr 13 '20 at 06:49
thanks it works, but can you look at my code again? there's a commented code it's just embeden video i want to add it to the array, do you know how? – naoval Apr 13 '20 at 07:29
You have this video card with each question or different formarray? – Gourav Garg Apr 13 '20 at 07:34
just like google forms actually, user can add videos to as many as they want, or maybe you have better approach for this – naoval Apr 13 '20 at 07:38
after i copied your code this appear ERROR TypeError: Cannot read property 'setValue' of undefined when i drag the card – naoval Apr 13 '20 at 07:39
You need to create another formarray like questions – Gourav Garg Apr 13 '20 at 07:41
Have you added 'display_order' in your question form? – Gourav Garg Apr 13 '20 at 07:42
form array? so i exclude the video card from stepQuestions formArray? – naoval Apr 13 '20 at 07:49
Sorry, it will be part of that question but as formarray – Gourav Garg Apr 13 '20 at 07:51
inside stepQuestion but i create new formarray inside? – naoval Apr 13 '20 at 07:52
yes like questions:new FormArray{new FormGroup{videos:new FormArray{new FormGroup}}} As you have created for questions – Gourav Garg Apr 13 '20 at 07:53
sadly i can't make it, i can give you a repo though, i can't add a dialog module from nebular – naoval Apr 13 '20 at 08:10
You can share the repo – Gourav Garg Apr 13 '20 at 08:14
https://github.com/naonvl/kewirus-test/tree/dev here's the repo, the code is on pages/admin/user-projects/step-list – naoval Apr 13 '20 at 08:20
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/211531/discussion-between-gourav-garg-and-naoval). – Gourav Garg Apr 13 '20 at 08:25

Dragable forms and save the data to json file

1 Answers1