Попытка использовать cdkDragDrop, заполненный FormGroup> FormArray. Я вижу, что количество элементов в моем массиве (3) отображается правильно, но я не могу отобразить значение в div, вместо этого отображается [Object Object].
Составная часть:
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);
}
HTML:
<form [formGroup]="myForm">
<input formControlName="title" />
<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 {{item}}</span>
</div>
</div>
{{ myForm.value | json}}
</form>
Stackblitz: https://stackblitz.com/edit/angular-asevei-gf4der?file=app%2Fcdk-drag-drop-sorting-example.html