在Angular 2中,可以使用FormBuilder和FormArray来动态创建包含FormArray的formControl。以下是一个示例解决方案:
首先,在component.ts文件中引入所需的模块和服务:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
然后,在组件类中定义一个表单变量和一个FormBuilder实例:
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent {
form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
formArray: this.fb.array([]) // 初始化一个空的FormArray
});
}
}
接下来,可以在模板文件(form.component.html)中使用*ngFor指令来迭代formArray控件,并为每个控件创建一个动态的formControl:
在上述示例中,我们使用*ngFor指令迭代formArray.controls数组,并为每个控件创建一个动态的formControl。请注意,我们使用[index]属性绑定formControlName,以确保每个控件都有独一无二的名称。
最后,在组件类中创建一个addFormControl方法,用于向formArray中添加新的formControl:
addFormControl() {
const formArray = this.form.get('formArray') as FormArray;
formArray.push(this.fb.control(''));
}
在addFormControl方法中,我们首先获取formArray控件,然后使用push方法向其添加一个新的formControl。
现在,当点击“Add FormControl”按钮时,将会动态添加一个新的formControl到formArray中。
这就是使用Angular 2创建包含FormArray的动态formControl的解决方案。您可以根据自己的需求进行修改和扩展。