使用Angular 8时,可以使用表单数组来处理具有动态数量的表单字段的情况。以下是一个示例解决方案:
formArrayName
指令来表示表单数组的名称,并使用*ngFor
指令来循环显示数组中的每个表单控件。
FormArray
对象并将其添加到主表单中。import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, 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;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
myArray: this.formBuilder.array([])
});
}
}
addControl() {
const control = this.formBuilder.control('');
(this.myForm.get('myArray') as FormArray).push(control);
}
removeControl(index: number) {
(this.myForm.get('myArray') as FormArray).removeAt(index);
}
在上面的示例中,addControl
方法将一个新的表单控件添加到表单数组中,removeControl
方法删除指定索引的表单控件。
这样,你就可以使用Angular 8来处理表单数组。