在Angular中,要将一个数组数据分配给另一个动态表单对象,可以使用FormBuilder和FormArray来实现。下面是一个示例代码:
首先,确保已经导入了必要的模块和类:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
然后,在组件类中创建一个表单对象和一个数组数据:
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
myForm: FormGroup;
dataArray: any[] = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 35 }
];
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
// 使用FormBuilder创建表单对象
this.myForm = this.formBuilder.group({
dataItems: this.formBuilder.array([])
});
// 将数组数据分配给表单对象
this.setDataItems();
}
setDataItems() {
// 获取表单中的dataItems控件
const dataItemsArray = this.myForm.get('dataItems') as FormArray;
// 循环遍历数组数据,并将每个数组项创建为FormGroup对象,然后添加到dataItemsArray中
this.dataArray.forEach(data => {
const dataItemGroup = this.formBuilder.group({
name: [data.name],
age: [data.age]
});
dataItemsArray.push(dataItemGroup);
});
}
}
最后,将表单对象和数组数据绑定到模板中:
通过上述代码,你可以将一个数组数据分配给另一个动态表单对象,并在模板中显示每个数据项的属性。