Ngx-formly: Multiple instances of formly-form on the same page are overlapping

[bhaidar]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x] support request

When placing multiple instances of formly-form on the same page, the fields overlap and only the latest wins.

This could be happening due to the fact that Angular re-uses components and hence I am getting this odd behavior.

I've put down a sample that you can check and assess.

https://stackblitz.com/edit/angular-xjh3ep

Thank you
Bilal

[aitboudad]

that's a mutability issue, we've introduced immutable mode in order to solve that common issue.

So you've several ways to solve that:

• copy fields input before passing it to the formly-form
• use immutable mode for a specific formly-form https://github.com/ngx-formly/ngx-formly/issues/1429#issuecomment-465186967
• enable immutable mode globally through NgModule declaration.

@NgModule({
  imports: [
    FormlyModule.forRoot({
      extras: { immutable: true }
    }),
  ],
})

[bhaidar]

Thanks @aitboudad
When using immutable I cannot find the resetModel() function on the options object anymore!

When using the first option, it works fine for me. It happens that I have a loop and in each iteration, I render a form. Now, every form component receives its own copy of the fields.

Now the problem is that fields become read-only. Check again the sample after I deep copied the fields:

https://stackblitz.com/edit/angular-xjh3ep

Thanks

[aitboudad]

Now the problem is that fields become read-only.

calling function that return a new object triggers a change detection infinitely, the solution is the copy fields see https://stackblitz.com/edit/angular-xjh3ep

When using immutable I cannot find the resetModel() function on the options object anymore!

    <form [formGroup]="form" (ngSubmit)="submit()">
      <formly-form #formlyForm ...></formly-form>
      <button type="button" (click)="formlyForm.options.resetModel()">Reset</button>
    </form>

[bhaidar]

@aitboudad I guess you didn't update the sample above! I still see the old one.

[bhaidar]

@aitboudad a kind reminder

[aitboudad]

https://stackblitz.com/edit/angular-xjh3ep-s6ceut

[bhaidar]

So basically, when rendering a form with ngIf I need to have a fields property per item form? I just cannot use the same fields property all over for each iteration. Is that what I understand?

[aitboudad]

with ngIf it should work, but rendering the same field in different places may produce some unexpected behavior.

[bhaidar]

In fact, my scenario is rendering multiple records in forms. So each form is using the same component, but, the model differs from one form to another.

[aitboudad]

but the passed fields input is shared which and each field is responsible to render one component type

[bhaidar]

@aitboudad
True, that's why now what I've done is for each model I push to an array the fields. So I will have an array of the same length of the array of models, each item in this array has a copy of the fields.

Now, I am left with one issue. Since Angular re-uses, the same instance of my Custom Form Wrapper, any state inside the component is not being dealt with it properly. Is there a way to force Angular to either create a new instance of a component inside ngFor or come up with isolation for the state inside the Custom Form Wrapper component?

[aitboudad]

Since Angular re-uses, the same instance of my Custom Form Wrapper

not true

[bhaidar]

I am not sure we are talking about the same Form Wrapper. It's a component I've created to wrap the formly form. I noticed that the same ID is given for the components which made me think they are being re-used.

[bhaidar]

Notice here. Two instances of my form components are being rendered. Both get the same id.

[aitboudad]

sorry that's out of my scope :)

[top-dev830]

Hello, I have same problem.
Is there any solution to solve this?

[aitboudad]

@top-dev830 https://github.com/ngx-formly/ngx-formly/issues/1470#issuecomment-473011382

[top-dev830]

I've already tried that. But the problem is, I need to use ngFor for iterating several formly-form.
So now I have the same issue @bhaidar has.

[aitboudad]

which problem, can you provide a reproduction example using stackblitz?

[top-dev830]

https://stackblitz.com/edit/angular-hnekxc

plz check here. There's two wizards separated by tabs.
You can change any form fields, but after submit, you can see two models of each form are same.
This is the problem.

[aitboudad]

@top-dev830 for each wizard pass a separate form instance similar to the model

[top-dev830]

can you plz updateh the stackblitz?

[aitboudad]

https://stackblitz.com/edit/angular-ok3qiz

[top-dev830]

Thanks. It's working very well.