我正在try 将FormArray与CDkDropList结合使用.但一旦我添加相应的FormGroup,该组中的hdkDrag就会停止工作.为了简单起见,我在这里删除了任何其他事件,例如按钮的点击事件等.
所以这是有效的:
<div cdkDropList cdkDropListOrientation="horizontal" style="display: flex;">
<ng-container *ngFor="let group of formArray.value; let i = index" formArrayName="myFormArray">
<div cdkDrag>
<div cdkDragHandle style="padding: 1em; margin: 1em;background: red;">{{i}}</div>
</div>
</ng-container>
</div>
这不是:
<div cdkDropList cdkDropListOrientation="horizontal" style="display: flex;">
<ng-container *ngFor="let group of formArray.value; let i = index" formArrayName="compositeContent">
<div [formGroupName]="i" cdkDrag>
<div cdkDragHandle style="padding: 1em; margin: 1em;background: red;">{{i}}</div>
</div>
</ng-container>
</div>
这也不是:
<div cdkDropList cdkDropListOrientation="horizontal" style="display: flex;">
<ng-container *ngFor="let group of formArray.value; let i = index" formArrayName="compositeContent">
<div cdkDrag>
<div cdkDragHandle style="padding: 1em; margin: 1em;background: red;">{{i}}</div>
<div [formGroupName]="i"></div>
</div>
</ng-container>
</div>
这是formArray getter:
get formArray(): FormArray {
return this.form.controls["formArray"] as FormArray;
}
当从API的现有数据添加到FormArray时,我就是这样创建新的formArray元素的:
addElement(data): void {
this.formArray.insert(this.formArray.length, this.getNewElementFormGroup(data));
}
getNewElementFormGroup(data): FormGroup {
return new FormGroup({...});
}
这是一个stackblitz.将[formGroupName]="i"添加到cdkDrag迪夫以重现错误.