在Angular中,模型的可变子模型可以通过使用FormArray
来实现。FormArray
是一个类似于数组的对象,用于管理动态的表单控件集合。下面是一个示例代码,演示如何在Angular 10中创建具有可变子模型的模型:
首先,在组件类中创建一个表单模型,其中包含一个FormArray
来管理子模型:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
@Component({
selector: 'app-model-example',
templateUrl: './model-example.component.html',
styleUrls: ['./model-example.component.css']
})
export class ModelExampleComponent implements OnInit {
modelForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit(): void {
this.modelForm = this.fb.group({
subModels: this.fb.array([])
});
}
get subModels(): FormArray {
return this.modelForm.get('subModels') as FormArray;
}
addSubModel(): void {
this.subModels.push(this.createSubModel());
}
createSubModel(): FormGroup {
return this.fb.group({
// 子模型的属性
});
}
removeSubModel(index: number): void {
this.subModels.removeAt(index);
}
}
然后,在模板中使用FormArray
来循环显示子模型的控件,并提供添加和删除子模型的功能:
通过以上代码,你可以在Angular 10中创建一个具有可变子模型的模型。每当点击"Add Sub Model"按钮时,将会添加一个新的子模型,并在模板中显示相应的控件。点击"Remove"按钮可以删除对应的子模型。