在Angular Drag-Drop模块中，他们为MoveIteMinarray((函数提供了文档，我们只能在数组中拖动内容。但是，我们如何在formarray中进行洗牌(formgroups/formcontrols(？
即使我尝试了此MoveIteMinFormarRay((函数，如下所述，https://github.com/angular/angular/angular/issues/27171。但是我无法使它起作用。
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));
}
这是有效的示例：
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-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);
}
这是我的工作解决方案
在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>
在component.ts文件
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));
}
@gopal的先前解决方案无效，因为移动项目后，其余项目必须根据拖动方向向上或向下移动。这是一个可以正常工作的解决方案：
form = this.formBuilder.group({
field1: [null, Validators.required],
field2: [null, Validators.required],
attributes: this.formBuilder.array([], Validators.required)
});
get attributes(): FormArray {
return this.form.get('attributes') as FormArray;
}
dragDrop(event: CdkDragDrop<AbstractControl[]>) {
this.moveItemInFormArray(this.attributes, event);
}
moveItemInFormArray(formArray: FormArray, event: CdkDragDrop<AbstractControl[]>): void {
const from = this.clamp(event.previousIndex, formArray.length - 1);
const to = this.clamp(event.currentIndex, formArray.length - 1);
if (from === to) {
return;
}
const target = formArray.at(from);
const delta = to < from ? -1 : 1;
for (let i = from; i !== to; i += delta) {
const current = formArray.at(i + delta);
formArray.setControl(i, current);
}
formArray.setControl(to, target);
}
clamp(value: number, max: number): number {
return Math.max(0, Math.min(max, value));
}
const form_array = ...
const form_group = form_array.at(event.previousIndex);
form_array.removeAt(event.previousIndex);
form_array.insert(event.currentIndex, form_group);