Merge pull request #4763 from jlipka/fix/move-form-array-items

fix: improve 'move' handling of controls in form array

Author: tdonohue

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

@@ -35,7 +35,7 @@
               [formGroup]="group"
               [formModel]="formModel"
               [context]="groupModel"
-              [group]="getControlOfGroup(groupModel)"
+              [group]="control.get([groupModel.index])"
               [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.spec.ts

@@ -162,4 +162,37 @@ describe('DsDynamicFormArrayComponent', () => {
     expect(component.elementBeingSorted).toBeNull();
     expect(component.elementBeingSortedStartingIndex).toBeNull();
   });
+
+  describe('moveFormControlToPosition', () => {
+    it('should move form control from one position to another', () => {
+      const formArray = component.control as any;
+      const initialControls = formArray.controls.map((ctrl: any) => ctrl);
+      const movedControl = initialControls[1];
+
+      // Move control from index 1 to index 3
+      (component as any).moveFormControlToPosition(1, 3);
+
+      expect(formArray.at(3)).toBe(movedControl);
+      expect(formArray.length).toBe(5);
+    });
+
+    it('should preserve form control values after move', () => {
+      const formArray = component.control as any;
+
+      // Set actual values to the form controls
+      formArray.at(0).patchValue({ testFormRowArrayGroupInput: 'Author 1' });
+      formArray.at(1).patchValue({ testFormRowArrayGroupInput: 'Author 2' });
+      formArray.at(2).patchValue({ testFormRowArrayGroupInput: 'Author 3' });
+      formArray.at(3).patchValue({ testFormRowArrayGroupInput: 'Author 4' });
+      formArray.at(4).patchValue({ testFormRowArrayGroupInput: 'Author 5' });
+
+      (component as any).moveFormControlToPosition(1, 3);
+
+      expect(formArray.at(0).value.testFormRowArrayGroupInput).toBe('Author 1');
+      expect(formArray.at(1).value.testFormRowArrayGroupInput).toBe('Author 3');
+      expect(formArray.at(2).value.testFormRowArrayGroupInput).toBe('Author 4');
+      expect(formArray.at(3).value.testFormRowArrayGroupInput).toBe('Author 2');
+      expect(formArray.at(4).value.testFormRowArrayGroupInput).toBe('Author 5');
+    });
+  });
 });

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

@@ -87,15 +87,16 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
   }
 
   moveSelection(event: CdkDragDrop<Relationship>) {
+    const prevIndex = event.previousIndex;
+    const index = event.currentIndex;
 
     // prevent propagating events generated releasing on the same position
-    if (event.previousIndex === event.currentIndex) {
+    if (prevIndex === index) {
       return;
     }
 
-    this.model.moveGroup(event.previousIndex, event.currentIndex - event.previousIndex);
-    const prevIndex = event.previousIndex;
-    const index = event.currentIndex;
+    this.model.moveGroup(prevIndex, index - prevIndex);
+    this.moveFormControlToPosition(prevIndex, index);
 
     if (hasValue(this.model.groups[index]) && hasValue((this.control as any).controls[index])) {
       this.onCustomEvent({
@@ -123,19 +124,6 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
     return this.model.groups.length === 1 || !this.model.isDraggable || this.model.notRepeatable;
   }
 
-  /**
-   * 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]);
-  }
-
   /**
    * Toggles the keyboard drag and drop feature for the given sortable element.
    * @param event
@@ -198,6 +186,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
 
     if (this.elementBeingSorted) {
       this.model.moveGroup(idx, newIndex - idx);
+      this.moveFormControlToPosition(idx, newIndex);
       if (hasValue(this.model.groups[newIndex]) && hasValue((this.control as any).controls[newIndex])) {
         this.onCustomEvent({
           previousIndex: idx,
@@ -226,6 +215,7 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
 
   cancelKeyboardDragAndDrop(sortableElement: HTMLDivElement, index: number, length: number) {
     this.model.moveGroup(index, this.elementBeingSortedStartingIndex - index);
+    this.moveFormControlToPosition(index, this.elementBeingSortedStartingIndex);
     if (hasValue(this.model.groups[this.elementBeingSortedStartingIndex]) && hasValue((this.control as any).controls[this.elementBeingSortedStartingIndex])) {
       this.onCustomEvent({
         previousIndex: index,
@@ -280,4 +270,19 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
       }));
     }
   }
+
+  private moveFormControlToPosition(fromIndex: number, toIndex: number) {
+    if (!hasValue(fromIndex) || !hasValue(toIndex)) {
+      return;
+    }
+
+    const formArray = this.control as any;
+    if (formArray && formArray.controls) {
+      const movedControl = formArray.at(fromIndex);
+      if (movedControl) {
+        formArray.removeAt(fromIndex,{ emitEvent: false });
+        formArray.insert(toIndex, movedControl, { emitEvent: false });
+      }
+    }
+  }
 }