在Angular中,可以使用FormArray来管理动态表单组。下面是一个包含代码示例的解决方法:
首先,创建一个FormGroup,它包含一个FormArray:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
myArray: this.fb.array([])
});
}
get myArray() {
return this.myForm.get('myArray') as FormArray;
}
addGroup() {
const newGroup = this.fb.group({
// 添加表单控件
name: [''],
email: ['']
});
this.myArray.push(newGroup);
}
}
在上面的代码中,先创建一个FormGroup,并将其包含的控件定义为空。然后,使用FormBuilder来创建每个动态添加的FormGroup,将其添加到FormArray中。
在模板文件(example.component.html)中,可以使用ngFor循环来显示每个表单组的控件:
在上面的代码中,使用formArrayName指令来将FormArray绑定到模板中的div元素。然后,使用ngFor循环来显示每个表单组的控件。formGroupName指令用于将每个表单组绑定到相应的div元素。
最后,使用一个按钮来触发addComponent()方法,该方法会在FormArray中添加一个新的FormGroup。
通过以上代码示例,你可以在Angular中使用FormArray来管理动态表单组。每次点击按钮时,都会添加一个新的FormGroup到FormArray中。