Angular Dynamic Reactive Form嵌套-用於復選框的FormArray方法

Question

我在這里遇到有關在Angular中使用Reactive Forms的邏輯問題。

我有一個與以下對象相似的對象。

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

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

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

role: RoleModel

菜單項基本上是UI中的一個復選框。

屬於其菜單組的菜單項列表將顯示在其標題下。

喜歡，

菜單組名稱1.菜單項1->復選框2.菜單項2->復選框

所以，現在的問題。

我需要為這個問題建立一個反應式表格。 我無法提出解決方案。 我試圖建立嵌套的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創建FormGroup ，並將它們添加到單個FormArray 。 最后，如果您獲得整個表單的值，則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
        }
      ]
    }
  ]
}

創建這樣的三個方法。

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

並通過這篇文章來獲得一個清晰的主意。 並使用此stackblitz來查看如何創建表單組和formArrays。