Bug :: arrayRef.splice is not a function

[stekontar]

I'm submitting a

[X] Bug / Regression
[ ] Feature Request / Proposal

I'm using

NG Dynamic Forms Version: `8.0.1`

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

Description

@udos86
I just have upgraded to version 8 from v7.0.1 and the following error appeared.

DynamicMaterialFormArrayComponent.html:10 ERROR TypeError: arrayRef.splice is not a function
at DynamicFormComponentService.registerFormControlRef (core.js:3321)
at DynamicMaterialFormControlContainerComponent.registerComponentRef (core.js:1622)
at DynamicMaterialFormControlContainerComponent.createFormControlComponent (core.js:1460)
at DynamicMaterialFormControlContainerComponent.ngOnChanges (core.js:1292)

based on my reasearch this is happening because the same model.id exists in more than one elements (formGroup/FormArray) despite that are placed in different level.

I understand that model.id should be unique in same level but in nested ones should be allowed.

The following MODEL reproduces the error.

export const MY_FORM_MODEL: DynamicFormModel = [
  new DynamicFormGroupModel({
    id: "group_0",
    legend: "group 0",
    group: [
      new DynamicFormGroupModel({
        id: "group_1000",
        legend: "Group 1000",
        group: [
          new DynamicInputModel({
            id: "field_10",
            label: "Field 10"
          })
        ]
      }),
      new DynamicFormArrayModel({
        id: "group_2000",
        label: "Group 2000",
        initialCount: 1,
        groupFactory: () => {
          return [
            new DynamicInputModel({
              id: "field_20",
              label: "Field 20"
            }),
            new DynamicFormGroupModel({
              id: "group_2000",
              legend: "group 200",
              group: [
                new DynamicInputModel({
                  id: "field_31",
                  label: "Field 31"
                }),
                new DynamicInputModel({
                  id: "field_32",
                  label: "Field 32",
                  inputType: "date"
                }),
                new DynamicInputModel({
                  id: "field_33",
                  label: "Field 33"
                })
              ]
            })
          ];
        }
      }),
      new DynamicFormGroupModel({
        id: "group_4000",
        legend: "Group 4000",
        group: [
          new DynamicFormGroupModel({
            id: "group_2000",
            label: "Group 2000",
            group: [
              new DynamicInputModel({
                id: "field_51",
                label: "group 51"
              })
            ]
          })
        ]
      })
    ]
  })
];

Please pay attention on group_2000 that is repeated twice.

This is a critical issue as the same models can be reused many times in different levels or in the same level but directly nested to each other.

Regareds,
S.

[udos86]

@stekontar Hi!

This is a critical issue as the same models can be reused many times in different levels or in the same level but directly nested to each other.

I'll add a bugfix for this but at the same time would like to strongly encourage you to not use ids multiple times as this can lead to unexpected behavior in general.

[stekontar]

@udos86
Thank you for the response.
About id's I haven't figure out a gerneral way to handle them.

Imagine that I have an object that represents contact information.
Name, Email etc.

This object is the same for the Sender and the Recipient
(this is the simpliest object. I handle more complex and nested models)

I could not change those models due to backend restiction.

The result is that in DOM are creating inputs with the same ID.

If you have any suggestions about that are welcome.

Sample Model :

export const MY_FORM_MODEL: DynamicFormModel = [
  new DynamicFormGroupModel({
    id: "info",
    legend: "Informations",
    group: [
      new DynamicFormGroupModel({
        id: "sender",
        legend: "Sender",
        group: [
          new DynamicInputModel({
            id: "name",
            label: "Name"
          }),
          new DynamicInputModel({
            id: "email",
            label: "Email"
          })
        ]
      }),
      new DynamicFormGroupModel({
        id: "recipient",
        legend: "Recipient",
        group: [
          new DynamicInputModel({
            id: "name",
            label: "Name"
          }),
          new DynamicInputModel({
            id: "email",
            label: "Email"
          })
        ]
      })
    ]
  })
];

[udos86]

fixed in 8.1.0