在Angular 7中,可以使用响应式表单来实现数组级联下拉框,并加载保存的数据。下面是一个示例解决方案:
form.component.ts
的组件文件,并导入所需的模块和服务。import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
import { DataService } from './data.service';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder, private dataService: DataService) { }
ngOnInit() {
this.form = this.fb.group({
category: ['', Validators.required],
subCategories: this.fb.array([])
});
// 加载保存的数据
const savedData = this.dataService.getSavedData();
if (savedData) {
this.form.patchValue(savedData);
savedData.subCategories.forEach(subCategory => {
this.addSubCategory(subCategory);
});
}
// 监听分类选择的变化,重新加载子分类数据
this.form.get('category').valueChanges.subscribe(value => {
this.loadSubCategories(value);
});
}
// 添加子分类表单控件
addSubCategory(subCategory?: string) {
const subCategories = this.form.get('subCategories') as FormArray;
subCategories.push(this.fb.control(subCategory || ''));
}
// 移除子分类表单控件
removeSubCategory(index: number) {
const subCategories = this.form.get('subCategories') as FormArray;
subCategories.removeAt(index);
}
// 加载子分类数据
loadSubCategories(category: string) {
const subCategories = this.form.get('subCategories') as FormArray;
subCategories.clear();
const categoryData = this.dataService.getCategoryData(category);
if (categoryData) {
categoryData.subCategories.forEach(subCategory => {
this.addSubCategory(subCategory);
});
}
}
// 提交表单
onSubmit() {
if (this.form.valid) {
// 处理表单提交逻辑
this.dataService.saveData(this.form.value);
}
}
}
form.component.html
的模板文件,并在其中使用formGroup
、formArrayName
和formControlName
指令来构建表单。
data.service.ts
的服务文件,并在其中模拟获取和保存数据的逻辑。import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataService {
// 模拟从后端获取保存的数据
getSavedData() {
return {
category: 'category2',
subCategories: ['subCategory2-1', 'subCategory2-2']
};
}
// 模拟从后端获取分类数据
getCategoryData(category: string) {
if