要在Angular 6中使用ngx-sortable控件放置一个动态表单,你可以按照以下步骤进行操作:
npm install ngx-sortable --save
import { SortableModule } from 'ngx-sortable';
@NgModule({
imports: [
SortableModule.forRoot()
],
...
})
export class AppModule { }
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-dynamic-form',
templateUrl: './dynamic-form.component.html',
styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.form = this.fb.group({
fields: this.fb.array([])
});
}
get fields() {
return this.form.get('fields') as FormArray;
}
addField() {
const field = this.fb.group({
name: ['', Validators.required],
type: ['', Validators.required]
});
this.fields.push(field);
}
removeField(index: number) {
this.fields.removeAt(index);
}
}
在上面的代码中,我们使用*ngFor指令来循环遍历表单字段,并使用[formGroupName]指令将表单字段与ngx-sortable控件关联起来。
现在,你可以在Angular 6中使用ngx-sortable控件来放置动态表单字段了。