Add a DynamicFormArrayModel to a DynamicFormArrayModel

[mixecan]

Hi!
First, great project! It's very straightforward to create a form if you already know how to use ReactiveForms.
I'm trying to replicate a structure where I have a form array of form groups that contain another array of elements.
By using ReactiveForms I would do (fb = FormBuilder)

this.form = this.fb.group({
  name: ['', Validators.required],
  children: this.fb.array([
    this.fb.group({
      name: ['', Validators.required],
      subchildren: this._fb.array([
        this.fb.group({
          name: ['', Validators.required],
          })
        ])
      })
    ])
});

But I'm unable to reproduce this structure using ng2-dynamic-forms. This is my attempt

export const MY_FORM_MODEL: DynamicFormControlModel[] = [
  new DynamicInputModel({
    id: 'name',
    required: true,
  }),
  new DynamicFormArrayModel({
    id: 'children',
    initialCount: 1,
    createGroup: () => [
      new DynamicInputModel({
        id: 'name',
        required: true
      })
      new DynamicFormArrayModel({
        id: 'subchidlren'
      })
    ]
  })
];

I get an error at the 'subchildren' DynamicFormArrayModel because it's not a subclass of DynamicFormValueControlModel.
Is it possible to get the result I'm trying to replicate?

Thank you

[udos86]

@mixecan Hi! Thanks for your message!

At the moment nesting of Form Arrays is restricted by the type you described as I initially wanted to avoid to complex model structures.

But if this is a serious requirement I'll try to implement that in the future.

[mixecan]

Thanks @udos86
At the moment I reverted to FormBuilder (as my form are still pretty fixed) but for future extensions I would really like to have this functionality available.

[udos86]

@mixecan There'll be an adjustment in 1.3.17 to allow this. Maybe you could give some feedback then...

[mixecan]

Thank you @udos86.
I will try to migrate my forms and let you know

[krishnapsms]

Hi @mixecan @udos86 i want to add sub-children level by having add and remove button how i can do that adding sub-children elements dynamically by pressing add button.

[stekontar]

Hi @mixecan @udos86 @krishnapsms
I also want to add-sub-children level, something like in this example
https://plnkr.co/edit/vSODkb8i7o54X3fST9VF?p=preview
the first array level is working correctly but the second level could not be found as control in insert/remove function.
I tried by adding ArrayModel in formGroup and without,

new DynamicFormArrayModel({
        id: 'children',
        initialCount: 1,
        createGroup: () => [
            new DynamicInputModel({
                id: 'name',
                required: true
            }),
            new DynamicFormArrayModel({
                id: 'subchidlren',
                initialCount: 1,
                createGroup: () => {
                    return [
                        new DynamicInputModel({
                            id: 'name1',
                            required: true
                        })
                    ]
                }
            })
        ]
    })

any suggestions?

@udos86 thanks for this beautiful library.