要实现Angular CDK的拖放与响应式表单功能,可以按照以下步骤进行:
npm install @angular/cdk
import { DragDropModule } from '@angular/cdk/drag-drop';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
DragDropModule,
FormsModule,
ReactiveFormsModule
],
// 其他配置项...
})
export class AppModule { }
{{ item }}
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
items = ['Item 1', 'Item 2', 'Item 3'];
form: FormGroup;
ngOnInit() {
this.form = new FormGroup({
inputField: new FormControl('')
});
}
onDrop(event: CdkDragDrop) {
moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}
}
这样,你就可以同时使用Angular CDK的拖放功能和响应式表单功能了。在拖放区域中拖动元素时,onDrop
方法会被调用,并且表单的输入字段也可以正常工作。