在Angular 2中,我们可以使用FormBuilder和FormControl来创建响应式表单。以下是一个示例,展示了如何重复使用单个表单控件。
首先,我们需要在组件的构造函数中导入FormBuilder和FormControl:
import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-form',
template: `
`,
})
export class FormComponent {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({
items: this.formBuilder.array([
this.createItem()
])
});
}
createItem(): FormControl {
return this.formBuilder.control('');
}
addItem(): void {
const items = this.myForm.get('items') as FormGroup;
items.push(this.createItem());
}
}
在上面的代码中,我们使用formBuilder
创建了一个响应式表单,并初始化了一个表单控件数组items
。createItem()
方法用于创建一个新的表单控件,然后我们将其添加到items
数组中。在模板中,我们使用*ngFor
指令来迭代表单控件数组,并为每个控件创建一个输入框。
最后,我们在模板中添加了一个按钮,当点击按钮时,调用addItem()
方法来添加一个新的表单控件到items
数组中。
这样,我们就可以重复使用单个表单控件,以实现动态添加多个表单输入框的功能。