在Angular 10中,可以使用FormBuilder
和FormArray
来创建带有数组的3级嵌套表单组。下面是一个示例代码:
首先,在组件类中导入所需的模块和类:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
然后,在组件类中创建表单组并初始化:
export class MyComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.myForm = this.fb.group({
// 第一级
level1: this.fb.array([
this.initLevel1()
])
});
}
// 初始化第一级表单组
initLevel1() {
return this.fb.group({
// 第二级
level2: this.fb.array([
this.initLevel2()
])
});
}
// 初始化第二级表单组
initLevel2() {
return this.fb.group({
// 第三级
level3: this.fb.array([
this.initLevel3()
])
});
}
// 初始化第三级表单组
initLevel3() {
return this.fb.group({
// 添加你需要的表单控件
name: [''],
age: ['']
});
}
// 添加第一级表单组
addLevel1() {
const control = this.myForm.get('level1') as FormArray;
control.push(this.initLevel1());
}
// 添加第二级表单组
addLevel2(level1Index: number) {
const control = (this.myForm.get('level1') as FormArray).at(level1Index).get('level2') as FormArray;
control.push(this.initLevel2());
}
// 添加第三级表单组
addLevel3(level1Index: number, level2Index: number) {
const control = ((this.myForm.get('level1') as FormArray).at(level1Index).get('level2') as FormArray).at(level2Index).get('level3') as FormArray;
control.push(this.initLevel3());
}
// 移除第一级表单组
removeLevel1(level1Index: number) {
const control = this.myForm.get('level1') as FormArray;
control.removeAt(level1Index);
}
// 移除第二级表单组
removeLevel2(level1Index: number, level2Index: number) {
const control = (this.myForm.get('level1') as FormArray).at(level1Index).get('level2') as FormArray;
control.removeAt(level2Index);
}
// 移除第三级表单组
removeLevel3(level1Index: number, level2Index: number, level3Index: number) {
const control = ((this.myForm.get('level1') as FormArray).at(level1Index).get('level2') as FormArray).at(level2Index).get('level3') as FormArray;
control.removeAt(level3Index);
}
// 提交表单
onSubmit() {
console.log(this.myForm.value);
}
}
在组件的HTML模板中,使用formGroup
、formArrayName
和formGroupName
指令来创建表单控件: