下面是一个示例,展示了如何使用Angular将数组存储到表单数组中:
首先,我们需要在组件类中定义一个表单,并为表单数组创建一个表单控件。我们可以使用FormBuilder
服务来简化此过程。
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
arrayData: this.fb.array([])
});
}
get arrayData(): FormArray {
return this.myForm.get('arrayData') as FormArray;
}
addDataItem() {
this.arrayData.push(this.fb.control(''));
}
removeDataItem(index: number) {
this.arrayData.removeAt(index);
}
onSubmit() {
console.log(this.myForm.value);
}
}
在上述代码中,我们创建了一个名为arrayData
的表单数组,并在构造函数中初始化了表单。
接下来,我们需要在模板中使用表单控件来处理数组的添加和删除操作。下面是一个示例模板:
在模板中,我们使用了formArrayName
指令来绑定表单数组控件,并使用ngFor
指令循环遍历每个数组项。每个数组项都有一个输入框和一个删除按钮。点击“添加”按钮将调用addDataItem
方法,向数组中添加一个新的表单控件。点击“删除”按钮将调用removeDataItem
方法,从数组中删除指定的表单控件。
最后,我们在onSubmit
方法中将表单值打印到控制台。
希望这个示例能够帮助你解决问题!