在Angular中,使用反应式表单数组可以动态地添加和移除表单控件。下面是一个示例的解决方法:
首先,创建一个新的Angular项目,并导入FormsModule和ReactiveFormsModule模块。
在组件的HTML模板中,创建一个表单,并将其与组件的FormGroup关联起来。在这个表单中,我们将创建一个数组表单控件,用于动态添加和移除表单控件。
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, FormArray } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
myForm: FormGroup;
myArray: FormArray;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
myArray: this.formBuilder.array([])
});
this.myArray = this.myForm.get('myArray') as FormArray;
this.addItem();
}
addItem() {
this.myArray.push(new FormControl(''));
}
removeItem(index) {
this.myArray.removeAt(index);
}
}
在上述代码中,我们使用FormBuilder来创建和初始化FormGroup和FormArray。addItem()方法用于向FormArray中添加新的表单控件,removeItem()方法用于移除指定索引处的表单控件。
这样,我们就可以使用反应式表单数组来动态地添加和移除表单控件。