Merge pull request #3770 from DSpace/backport-3679-to-dspace-7_x

[Port dspace-7_x] #3678, #3217 - Fix ordering and changing values of repeatable inputs in submission form

Author: tdonohue

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html

@@ -7,9 +7,9 @@
       <!-- Draggable Container -->
       <div cdkDropList cdkDropListLockAxis="y" (cdkDropListDropped)="moveSelection($event)">
         <!-- Draggable Items -->
-        <div *ngFor="let groupModel of model.groups; let idx = index"
+        <div *ngFor="let groupModel of model.groups"
              role="group"
-             [formGroupName]="idx"
+             [formGroupName]="groupModel.index"
              [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]"
              cdkDrag
              [cdkDragDisabled]="dragDisabled"
@@ -25,7 +25,7 @@
                                              [formGroup]="group"
                                              [formModel]="formModel"
                                              [context]="groupModel"
-                                             [group]="control.get([idx])"
+                                             [group]="getControlOfGroup(groupModel)"
                                              [hidden]="_model.hidden"
                                              [class.d-none]="_model.hidden"
                                              [layout]="formLayout"

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts

@@ -81,4 +81,17 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
   get dragDisabled(): boolean {
     return this.model.groups.length === 1 || !this.model.isDraggable;
   }
+
+  /**
+   * Gets the control of the specified group model. It adds the startingIndex property to the group model if it does not
+   * already have it. This ensures that the controls are always linked to the correct group model.
+   * @param groupModel The group model to get the control for.
+   * @returns The form control of the specified group model.
+   */
+  getControlOfGroup(groupModel: any) {
+    if (!groupModel.hasOwnProperty('startingIndex')) {
+      groupModel.startingIndex = groupModel.index;
+    }
+    return this.control.get([groupModel.startingIndex]);
+  }
 }