[英]Angular Dynamic Reactive Form Nested - FormArray Approach for CheckBoxes
I am stuck with a logical issue here about using Reactive Forms in Angular. 我在这里遇到有关在Angular中使用Reactive Forms的逻辑问题。
I have an object similar to the one below. 我有一个与以下对象相似的对象。
interface MenuGroup {
title: string;
menuItems: MenuItem[];
};
interface MenuItem {
title: string;
status: string;
};
interface RoleModel {
roleName: string;
menuGroup: MenuGroup[];
};
role: RoleModel
Menu Item is basically a check box in the UI. 菜单项基本上是UI中的一个复选框。
List of Menu Items belonging to its Menu Group will be displayed under its title. 属于其菜单组的菜单项列表将显示在其标题下。
Like, 喜欢,
Menu Group Name 1. Menu Item 1 --> CheckBox 2. Menu Item 2 --> CheckBox 菜单组名称1.菜单项1->复选框2.菜单项2->复选框
So, now the question.. 所以,现在的问题。
I need to build a Reactive Form for this problem. 我需要为这个问题建立一个反应式表格。 I am not able to come up with a solution.
我无法提出解决方案。 I am trying to build nested FormArrays but in vain.
我试图建立嵌套的FormArrays,但徒劳。
Any help would be appreciated! 任何帮助,将不胜感激!
Here is what I suggest. 这是我的建议。 I assume that your
role
varible is equal to something like this object. 我假设您的
role
变量等于该对象。
this.role = {
roleName: 'Test Role name',
menuGroup: [
{
title: 'menu group 1',
menuItems: [
{
title: 'group 1 item 1',
status: 'active'
},
{
title: 'group 1 item 2',
status: 'inactive'
}
]
},
{
title: 'menu group 2',
menuItems: [
{
title: 'group 2 item 1',
status: 'active'
},
{
title: 'group 2 item 2',
status: 'inactive'
},
{
title: 'group 2 item 3',
status: 'active'
}
]
}
]
};
What you have to do is create formgroups for each of the menuItems
and add them to FormArray
. 您要做的是为每个
menuItems
创建表单组,并将它们添加到FormArray
。 Then you have to create FormGroup
s for each of the menuGroup
and add them to a single FormArray
. 然后,您必须为每个
menuGroup
创建FormGroup
,并将它们添加到单个FormArray
。 At the end if you get the value of the whole form group ist should look like this. 最后,如果您获得整个表单的值,则ist应该看起来像这样。
{
"title": "Test Role name",
"menuGroups": [
{
"title": "menu group 1",
"items": [
{
"group 1 item 1": null,
"group 1 item 2": null
}
]
},
{
"title": "menu group 2",
"items": [
{
"group 2 item 1": null,
"group 2 item 2": null,
"group 2 item 3": null
}
]
}
]
}
Create three methods like this. 创建这样的三个方法。
private buildForm(): void {
const formArray = this.fb.array([]);
this.form = this.fb.group({
title: [this.role.roleName],
menuGroups: formArray
});
this.role.menuGroup.forEach((menuGroup: MenuGroup) => {
formArray.push(this.buildSubFormGroup(menuGroup))
});
}
private buildSubFormGroup(menuGroup: MenuGroup): FormGroup {
return this.fb.group({
title: [menuGroup.title, Validators.required],
items: this.buildMenuItemFormGroup(menuGroup.menuItems)
});
}
private buildMenuItemFormGroup(menuItems: MenuItem[]): FormArray {
const formArray = this.fb.array([]);
const formGroup = this.fb.group({});
menuItems.forEach((menuItem: MenuItem) => {
formGroup.addControl(menuItem.title, new FormControl());
});
formArray.push(formGroup);
return formArray;
}
And go this article to get a clear idea. 并通过这篇文章来获得一个清晰的主意。 And Use this stackblitz to see how to create form groups and formArrays.
并使用此stackblitz来查看如何创建表单组和formArrays。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.