在Angular中,可以使用FormBuilder
和FormArray
来动态创建表单。下面是一个示例,展示如何使用这些概念来解决动态表单问题:
首先,需要导入FormBuilder
和FormGroup
:
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
然后,在组件类中创建一个表单:
export class MyComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
items: this.fb.array([]) // 使用FormArray来存储表单项
});
}
}
接下来,可以使用FormArray
的push
方法在表单中动态添加表单项:
addItem() {
const item = this.fb.group({
name: ['', Validators.required],
description: ['', Validators.required]
});
this.items.push(item);
}
removeItem(index: number) {
this.items.removeAt(index);
}
get items() {
return this.myForm.get('items') as FormArray;
}
在模板中,可以使用FormArray
的controls
属性来遍历表单项:
这样,就可以动态地添加和删除表单项了。每个表单项都由一个FormGroup
表示,其中包含name
和description
字段。点击"Add Item"按钮会调用addItem
方法,动态地添加一个表单项。点击"Remove"按钮会调用removeItem
方法,删除对应的表单项。
这是一个简单的示例,你可以根据自己的需求进行扩展和修改。