Question

我在这里遇到有关在Angular中使用反应式表单的逻辑问题。

我有一个与下面的物体相似的物体。

interface MenuGroup {
  title: string;
  menuItems: MenuItem[];
};

interface MenuItem {
  title: string;
  status: string;
};

interface RoleModel {
  roleName: string;
  menuGroup: MenuGroup[];
};

role: RoleModel

菜单项基本上是用户界面中的一个复选框。

属于其菜单组的菜单项列表将显示在其标题下。

就像

菜单组名称 1.菜单项1->复选框 2.菜单项2->复选框

所以，现在是问题。

我需要为该问题建立一个反应式表格。我无法提出解决方案。我试图建立嵌套的FormArrays，但徒劳。

任何帮助将不胜感激！

Answer 1

这是我的建议。我假设您的DELETE变量等于该对象。

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' } ] } ] };创建表单组并将其添加到menuItems。然后，您必须为每个FormArray创建FormGroup并将它们添加到单个menuGroup中。最后，如果您获得整个表单组的值，则ist应该看起来像这样。

FormArray

创建三个这样的方法。

{
  "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
        }
      ]
    }
  ]
}

并转到this文章以明确思路。并使用此stackblitz查看如何创建表单组和formArrays。

Angular Dynamic Reactive Form嵌套-用于复选框的FormArray方法

1 个答案: