Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Draggable formGroups in formArray (reactive forms)

In angular drag-drop module, they provided documentation for the moveItemInArray() function, by using this we can only drag content in an array only. but, how we could shuffle (formGroups/formControls) in formArray?

Even I tried this moveItemInFormArray() function, as mentioned here https://github.com/angular/angular/issues/27171. but I can not make it work.

groupDrag.component.html

    <form [formGroup]="exampleForm">
      <div formArrayName="formUnits" cdkDropList (cdkDropListDropped)="drop($event)" *ngFor="let unit of exampleForm.controls.formUnits.controls; let i=index" class="rowGroup">
        <div [formGroupName]="i" class="basic-container" cdkDrag>
          <div class="row row-container" >
            <button type="button" class="drag-handle" mat-icon-button cdkDragHandle>
              <mat-icon>unfold_more</mat-icon>
            </button>

            <!-- label input field -->
            <mat-form-field  class="col-lg-4"> 
              <input matInput placeholder="Please enter label without spaces" formControlName="label" required>  
            </mat-form-field>

            <!-- options input field -->
              <mat-form-field  class="col-lg-3"> 
                <input matInput placeholder="Enter Placeholdertext" formControlName="placeholder">
             </mat-form-field>

          </div>
        </div>
      </div>
    </form>

groupDrag.component.ts

drop(event: CdkDragDrop<FormGroup[]>) {
  console.log('drop event triggers')
  this.formArray = this.exampleForm.get('formUnits') as FormArray;
  const from = event.previousIndex;
  const to = event.currentIndex;
  this.moveItemInFormArray(this.formArray, from, to)
}

/**
* Moves an item in a FormArray to another position.
* @param formArray FormArray instance in which to move the item.
* @param fromIndex Starting index of the item.
* @param toIndex Index to which he item should be moved.
*/
moveItemInFormArray(formArray: FormArray, fromIndex: number, toIndex: number): void {
  const from = this.clamp(fromIndex, formArray.length - 1);
  const to = this.clamp(toIndex, formArray.length - 1);

  if (from === to) {
    return;
  }

  const delta = from > to ? 1 : -1;
  for (let i = from; i * delta < to * delta; i += delta) {
    const previous = formArray.at(i);
    const current = formArray.at(i + delta);
    formArray.setControl(i, current);
    formArray.setControl(i + delta, previous);
  }
}

/** Clamps a number between zero and a maximum. */
clamp(value: number, max: number): number {
  return Math.max(0, Math.min(max, value));
}
like image 767
Gopal Avatar asked May 15 '19 12:05

Gopal


People also ask

How do I remove FormControl from FormArray?

The key here is to navigate your form structure. Once you get to the form group that _id is in, you can use removeControl('_id') to remove the control.

Can FormArray contains FormGroup?

The FormArray is a way to Manage collection of Form controls in Angular. The controls can be FormGroup, FormControl, or another FormArray. Because it is implemented as Array, it makes it easier dynamically add controls.

How do you set a value on FormArray?

FormArray setValue() setValue() sets the value of the FormArray . We need to pass an array that matches the structure of the control. Create a sample FormArray . myFormArray = new FormArray([ new FormControl(), new FormControl(), new FormControl() ]);


2 Answers

Here is working example:

groupDrag.component.ts

import {moveItemInFormArray} from "./move-item-in-form-array";

drop(event: CdkDragDrop<string[]>) {
    moveItemInFormArray(this.arrayControls, event.previousIndex, event.currentIndex);
}

move-item-in-form-array.ts

import {FormArray} from '@angular/forms';

/**
 * Moves an item in a FormArray to another position.
 * @param formArray FormArray instance in which to move the item.
 * @param fromIndex Starting index of the item.
 * @param toIndex Index to which he item should be moved.
 */
export function moveItemInFormArray(formArray: FormArray, fromIndex: number, toIndex: number): void {
  const dir = toIndex > fromIndex ? 1 : -1;

  const from = fromIndex;
  const to = toIndex;

  const temp = formArray.at(from);
  for (let i = from; i * dir < to * dir; i = i + dir) {
    const current = formArray.at(i + dir);
    formArray.setControl(i, current);
  }
  formArray.setControl(to, temp);
}

like image 83
piernik Avatar answered Dec 08 '22 07:12

piernik


This is my working solution

in component.html

    <form [formGroup]="exampleForm">
      <div cdkDropList (cdkDropListDropped)="drop($event)">
        <div formArrayName="formUnits" class="rowGroup"
          *ngFor="let unit of exampleForm.controls.formUnits.controls; let i=index"  
           cdkDrag>
          <div [formGroupName]="i" class="basic-container" cdkDrag>
            <div class="row row-container" >
              <button type="button" class="drag-handle" mat-icon-button cdkDragHandle>
                <mat-icon>unfold_more</mat-icon>
              </button>

              <!-- label input field -->
              <mat-form-field  class="col-lg-4"> 
                <input matInput placeholder="Please enter label without spaces" 
                formControlName="label" required>  
              </mat-form-field>

              <!-- options input field -->
              <mat-form-field  class="col-lg-3"> 
                <input matInput placeholder="Enter Placeholdertext" formControlName="placeholder">
             </mat-form-field>

          </div>
        </div>
      </div>
    </div>
   </form>

in component.ts file

  drop(event: CdkDragDrop<string[]>) {
    this.formArray = this.exampleForm.get('formUnits') as FormArray;
    const from = event.previousIndex;
    const to = event.currentIndex;
    this.moveItemInFormArray(this.formArray, from, to);
  }

  /**
 * Moves an item in a FormArray to another position.
 * @param formArray FormArray instance in which to move the item.
 * @param fromIndex Starting index of the item.
 * @param toIndex Index to which he item should be moved.
 */
  moveItemInFormArray(formArray: FormArray, fromIndex: number, toIndex: number): void {
    const from = this.clamp(fromIndex, formArray.length - 1);
    const to = this.clamp(toIndex, formArray.length - 1);

    if (from === to) {
      return;
    }

    const previous = formArray.at(from);
    const current = formArray.at(to);
    formArray.setControl(to, previous);
    formArray.setControl(from, current);
  }

  /** Clamps a number between zero and a maximum. */
  clamp(value: number, max: number): number {
    return Math.max(0, Math.min(max, value));
  }
like image 20
Gopal Avatar answered Dec 08 '22 06:12

Gopal