Angular Dynamic Reactive Form Nested - CheckBoxes 的 FormArray 方法

Question

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

我有一个类似于下面的对象。

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

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

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

role: RoleModel

菜单项基本上是 UI 中的一个复选框。

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

喜欢，

菜单组名称 1. 菜单项 1 --> CheckBox 2. 菜单项 2 --> CheckBox

那么，现在的问题..

我需要为这个问题构建一个响应式表单。 我无法提出解决方案。我正在尝试构建嵌套的 FormArrays 但徒劳无功。

任何帮助将不胜感激！

Answer 1

这是我的建议。我假设你的 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。然后您必须为每个menuGroup 创建FormGroups，并将它们添加到单个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
        }
      ]
    }
  ]
}

像这样创建三个方法。

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;
  }

然后转到this 文章以获得清晰的想法。并使用此stackblitz 查看如何创建表单组和表单数组。