在Angular中,可以使用Reactive Forms来解决表单数组中的级联下拉菜单问题。下面是一个示例代码,演示如何使用Reactive Forms来实现级联下拉菜单。
首先,需要在组件中导入必要的模块和类:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';
然后,在组件类中创建一个表单组,并定义级联下拉菜单的选项:
@Component({
selector: 'app-form-array',
template: `
`
})
export class FormArrayComponent implements OnInit {
myForm: FormGroup;
categories = ['Category 1', 'Category 2', 'Category 3'];
subcategories = [
['Subcategory 1.1', 'Subcategory 1.2', 'Subcategory 1.3'],
['Subcategory 2.1', 'Subcategory 2.2', 'Subcategory 2.3'],
['Subcategory 3.1', 'Subcategory 3.2', 'Subcategory 3.3']
];
get items() {
return this.myForm.get('items') as FormArray;
}
constructor() { }
ngOnInit() {
this.myForm = new FormGroup({
items: new FormArray([])
});
// 添加一个空的表单组
this.addItem();
}
onCategoryChange(index: number) {
const subcategoryControl = this.items.at(index).get('subcategory');
const categoryValue = this.items.at(index).get('category').value;
// 根据选中的category更新对应的subcategory选项
subcategoryControl.setValue('');
subcategoryControl.enable();
subcategoryControl.setValue(this.subcategories[this.categories.indexOf(categoryValue)][0]);
}
addItem() {
const itemGroup = new FormGroup({
category: new FormControl(''),
subcategory: new FormControl({ value: '', disabled: true })
});
this.items.push(itemGroup);
}
onSubmit() {
console.log(this.myForm.value);
}
}
在上面的代码中,我们创建了一个myForm
表单组,其中包含一个items
表单数组。items
是一个FormArray对象,用于存储动态添加的表单组。
在ngOnInit
方法中,我们初始化了myForm
,并添加了一个空的表单组。
在模板中,我们使用formArrayName
指令将items
绑定到表单数组,并在ngFor
循环中动态创建表单组。我们使用formGroupName
指令将表单组绑定到索引i
。
在每个表单组中,我们使用formControlName
指令创建了两个下拉菜单。第一个下拉菜单用于选择一个category,第二个下拉菜单用于选择对应的subcategory。
当选择category时,我们使用onCategoryChange
方法更新对应的subcategory选项。我们通过FormArray
的at
方法获取当前表单组的controls,并根据选中的category更新subcategory选项。
最后,在onSubmit
方法中,我们可以获取整个表单的值。
通过以上示例,我们可以实现在表单数组中创建级联下拉菜单的功能。