在Angular中,可以使用FormArray来跟踪表单中的数组。下面是一个示例代码,展示如何在FormGroup中跟踪数组的数组:
首先,在组件的初始化方法中创建一个FormGroup,并在其中添加一个FormArray,用于跟踪数组的数组:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, 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 fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
arrayArray: this.fb.array([]) // 创建一个空的FormArray
});
}
}
然后,在模板中使用FormArray来渲染数组的数组,并添加相应的表单控件:
最后,在组件中添加方法来动态添加和删除数组的数组项:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, 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 fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
arrayArray: this.fb.array([]) // 创建一个空的FormArray
});
}
addArray() {
const arrayArray = this.myForm.get('arrayArray') as FormArray;
arrayArray.push(this.fb.group({
name: '',
age: ''
}));
}
removeArray(index: number) {
const arrayArray = this.myForm.get('arrayArray') as FormArray;
arrayArray.removeAt(index);
}
}
现在,你可以使用addArray()
方法动态添加数组的数组项,使用removeArray()
方法删除数组的数组项。