在Angular中处理两级/二维复选框的响应式表单可以使用FormGroup和FormArray来实现。下面是一个示例代码:
首先,在组件的模板中添加表单控件的HTML代码:
然后,在组件的类中定义表单和控件:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
categories: this.formBuilder.array([
this.initCategory()
])
});
}
initCategory() {
return this.formBuilder.group({
name: '',
subCategories: this.formBuilder.array([])
});
}
addCategory() {
const categoriesArray = this.myForm.get('categories') as FormArray;
categoriesArray.push(this.initCategory());
}
get categories() {
return this.myForm.get('categories') as FormArray;
}
getSubCategories(category) {
return category.get('subCategories') as FormArray;
}
}
在上面的代码中,我们使用formBuilder创建了一个FormGroup,其中包含一个FormArray来存储所有的categories。每个category也是一个FormGroup,其中包含一个name属性和一个subCategories的FormArray。通过getSubCategories方法,我们可以获取到每个category的subCategories。
请注意,上述代码只是一个示例,你需要根据你的实际需求进行相应的调整和修改。