Multiple levels of nested array Forms

[ermamud]

I'm using

NG Dynamic Forms Version: `^16.0.0`

[ ] Basic UI
[ ] Bootstrap UI  
[ ] Foundation UI
[ ] Ionic UI
[ ] Kendo UI
[ ] Material  
[ ] NG Bootstrap
[x] Prime NG

Description

Hi guys,

I am trying to decide if this package offers the feature that I need for my project: I need to implement a 2 deep level nested forms, similar concept to Task and Subtasks, where the user can add as many tasks as he/she wants in the form, and for each task, the user can also as many subtasks as he/she wants.

For this concept, I have a global Add Task button, and for each Task row I have the Remove Task and Add Subtask button, adding these 2 buttons using an ng-template for the array. In this case the context would be the Task array, and not the subtasks. I need to implement this Add Subtask button, so it would add new subtasks, but there is no example on how to achieve this in the documentation.

This is an example of the fields I am using

export const CHECKLIST_TASK_FORM_MODEL: DynamicFormModel = [
  new DynamicFormArrayModel({
    id: 'task_array',
    initialCount: 1,
    groupFactory: () => {
      return [
        new DynamicFormGroupModel({
          id: 'task_group',
          legend: 'Name',
          group: [
            new MyDynamicInputModel(
              {
                id: 'task_no',
                label: 'Task No',
                readOnly: true,
                value: 1,
              },
              {
                grid: {
                  host: 'col-1',
                },
              }
            ),

            new MyDynamicInputModel(
              {
                id: 'task_name',
                label: 'Task Name',
                required: true,
              },
              {
                grid: {
                  host: 'col-2',
                },
              }
            ),

            new MyDynamicInputModel(
              {
                id: 'assigned_to',
                label: 'Assigned To',
              },
              {
                grid: {
                  host: 'col-2',
                },
              }
            ),
          ],
        }),

        new DynamicFormArrayModel({
          id: 'sub_task_array',
          initialCount: 0,
          groupFactory: () => {
            return [
              new DynamicFormGroupModel({
                id: 'task_group_children',
                legend: 'Name',
                group: [
                  new MyDynamicInputModel(
                    {
                      id: 'subtasks_name',
                      label: 'Subtask Name',
                    },
                    {
                      grid: {
                        host: 'col-4',
                      },
                    }
                  ),

                  new MyDynamicInputModel(
                    {
                      id: 'notes2',
                      label: 'Notes',
                    },
                    {
                      grid: {
                        host: 'col-4',
                      },
                    }
                  ),
                ],
              }),
            ];
          },
        }),
      ];
    },
  }),
];

Thanks for the help