在Angular中的响应式表单中,嵌套数组可以使用FormArray来实现。如果想要访问嵌套数组,可以使用FormArray的at()方法。
以下是一个示例,在表单中添加了一个名为“orders”的FormArray,其中包含名为“items”的嵌套FormArray。通过使用at()方法可以访问嵌套数组的元素:
HTML模板:
组件代码:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
orders: this.fb.array([
this.fb.group({
items: this.fb.array([
this.fb.group({ name: '', price: '' }),
this.fb.group({ name: '', price: '' }),
])
}),
this.fb.group({
items: this.fb.array([
this.fb.group({ name: '', price: '' }),
this.fb.group({ name: '', price: '' }),
])
}),
])
});
}
get orders(): FormArray {
return this.myForm.get('orders') as FormArray;
}
getItem(orderIndex, itemIndex) {
return this