你可以声明一个变量
control:FormControl
并在您的输入表单中使用Control
<input [formControl]="control" />
只需点击一下
(click)="control=item.get('task')
但我认为你想“就地编辑”。为此,您需要两个变量,并且通常我会为 formArray 创建一个 getter
itemSelected:number=-1;
dropping:boolean=false
get items()
{
return (this.myForm.get('items') as FormArray)
}
我们的 .html 就像
<form [formGroup]="myForm">
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div [id]="i" class="example-box"
[cdkDragDisabled]="itemSelected==i"
(cdkDragDropped)="dropping=false"
(cdkDragMoved)="dropping=true;itemSelected=-1"
*ngFor="let item of items.controls; let i=index;" cdkDrag>
<span *ngIf="itemSelected!=i" style="cursor:text"
(click)="!dropping && focus(i)" >
{{item.value.task}} to be
</span>
<input #input *ngIf="itemSelected==i" [formControl]="item.get('task')"
(blur)="itemSelected=-1">
</div>
</div>
</form>
注意:要使用 cdkDragDisable 属性,您需要更新了你的参考资料, in "@angular/cdk": "7.0.3"
你没有这个属性,所以你也需要更新到 Angular 9
看看如何,如果“i=selectedIndex”它显示“输入”并且 cdkDrag 被禁用。当我们点击和拖动时我们需要管理。为此,我使用变量 Dropping,当您移动时为 true,当放置时为 false,此外,如果 drop 为 true,我们什么也不做,(click)="!dropping && focus(i)"
好吧,函数 focus 将变量 itemSelected 赋给该行的值并使其成为焦点。焦点需要在 setTimeout 中进行更改以更改 Angular 以显示输入
focus(i:number)
{
this.itemSelected=i
setTimeout(()=>{
this.input.nativeElement.focus()
})
}
最后,drop 函数需要考虑到 moveItemInArray 函数正在考虑使用数组,而不是 formArrays,所以
drop(event: any) {
const array=this.items.value //get the value of the formArray
moveItemInArray(array, event.previousIndex, event.currentIndex); //move the value
array.forEach((x:any,i:number)=>x.position=i) //recalculate the position
this.items.setValue(array) //make a setValue
}
你可以看到在这次堆栈闪电战 https://stackblitz.com/edit/angular-x7ogng?file=src%2Fapp%2Fcdk-drag-drop-sorting-example.ts