我有2个数组。我正在实现一个角度拖动,我想使用formarray来保存将元素滴入其中的数组。
问题是我不能将FormControl应用于DIV,因为它给出了一个错误
错误:没有名称的形式控件的值登录器:'语言'
这是HTML
<div>
<div class="example-container">
<h2>Selected Languages</h2>
<div
cdkDropList
#todoList="cdkDropList"
[cdkDropListData]="anotherarray"
[cdkDropListConnectedTo]="[doneList]"
class="example-list"
(cdkDropListDropped)="drop($event)"
formControlName="language">
<div class="list-group-item list-group-item-action " *ngFor="let item of anotherarray" cdkDrag>
{{item}}
</div>
</div>
</div>
<div class="example-container">
<h2>Available Languages</h2>
<div
cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="testingarray"
[cdkDropListConnectedTo]="[todoList]"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="list-group-item list-group-item-action " *ngFor="let item of testingarray" cdkDrag>{{item}}</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary my-2" translate>saveButtonLabel
<fa-icon *ngIf="saveIcon" [icon]="saveIcon" [spin]="saveIcon.iconName === 'spinner'"></fa-icon>
</button>
</form>
这仅支持常规数组,但是根据Piernik在Stackoverflow上的答案,您可以通过以下功能复制formarray的功能:
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 item = formArray.at(fromIndex);
for (let i = fromIndex; i * dir < toIndex * dir; i = i + dir) {
const current = formArray.at(i + dir);
formArray.setControl(i, current);
}
formArray.setControl(toIndex, item);
}
然后,在您的调用代码中,您通过formarray代替普通数组。
get formControls(): FormArray {
return this.form.get('arrayName') as FormArray;
}
constructor() {
this.form = this.formBuilder.group({
arrayName: this.formBuilder.array([]),
});
}
drop(event: CdkDragDrop<string[]>) {
moveItemInFormArray(
this.formControls,
event.previousIndex,
event.currentIndex
);
}
请参阅此处的工作stackblitz
当前,我们无法使用具有角拖动的FormControl,因为它可以与DIV一起使用,因此我们无法在其上添加FormContol。因此,我们需要使用事件CDKDROPLISTOPPORDED进行,每次删除项目时都会手动更新我们的模型。