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));
}
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.
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.
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() ]);
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);
}
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));
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With