我有这个例子:https://stackblitz.com/edit/angular-asevei?file=app%2Fcdk-drag-drop-sorting-example.html
一切正常,但是在将选择框“重置”到列表中的第一个值时。
有没有什么办法解决这一问题?它只是视觉上的,但对用户来说非常刺耳。我曾尝试使用 cdkDragPreview
选项,但无法使其工作。
组件:
import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'cdk-drag-drop-sorting-example',
templateUrl: 'cdk-drag-drop-sorting-example.html',
styleUrls: ['cdk-drag-drop-sorting-example.css'],
})
export class CdkDragDropSortingExample {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
title: ['title'],
items: fb.array([
fb.group({
name: fb.control('1'),
note: fb.control('quux')
}),
fb.group({
name: fb.control('2'),
note: fb.control('bar')
}),
fb.group({
name: fb.control('3'),
note: fb.control('baz')
})
])
})
}
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.myForm.get('items').controls, event.previousIndex, event.currentIndex);
moveItemInArray(this.myForm.get('items').value, event.previousIndex, event.currentIndex);
}
}
模板:<form [formGroup]="myForm">
<input formControlName="title" />
<div cdkDropList id="foo" class="example-list" (cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of myForm.get('items').controls" cdkDrag>
<span cdkDragHandle>drag</span>
<div [formGroup]="item">
<input type="text" formControlName="name">
<select formControlName="note">
<option>foo</option>
<option>bar</option>
<option>baz</option>
<option>quux</option>
</select>
</div>
</div>
</div>
{{ myForm.value | json }}
</form>
最佳答案
我修改了@Amir Fawzy 的答案,添加了一个变量来获取当前事件笔记,该笔记在拖动所选框时显示。
TS:
activeNote: string;
enter(i) {
this.activeNote = this.myForm.get('items')['controls'][i].get('note').value;
}
HTML:
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div [id]="i" class="example-box" *ngFor="let item of myForm.get('items').controls; let i=index;" cdkDrag #elem="cdkDrag" (mouseenter)="enter(i)">
<span cdkDragHandle>drag</span>
<div [formGroup]="item">
<input type="text" formControlName="name">
<select formControlName="note">
<option [hidden]="elem.moved">{{activeNote}}</option>
<option>foo</option>
<option>bar</option>
<option>baz</option>
<option>quux</option>
</select>
</div>
</div>
</div>
Here's a duplicate on Stackblitz ..
关于带有(响应式(Reactive))表单的 Angular CDK 拖放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53210612/