Can't have multiple ajsf's

[mikeddol]

It seems that I can not have more than one ajsf in one place. They seem to behave extremely weird, replacing eachothers form schemes and form data.
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

I have made a small repro here. Looks like having 2 json-schema-form in the same page either by themselves or in separate components is not supported. I can't exactly explain what the behaviour is because it seems that the data gets extremely corrupted. Either the entire scheme and data of one overrides the other or vice-versa. I have made the repo linked above as a demo. Master branch has the example with both json-schema-forms in the same app.component and on branch componentize I have created a separate component for each json-schema form and then use it in app.component. It uses "@angular/core": "~9.1.4" but originally I have bumped into this issue on "@angular/core": "~8.2.14".

To Reproduce
Either go here, clone it, npm install and ng serve it to observe or just create 2 json-schema-forms in the same component, each pointing to different schemas/options/data/onChange hooks and run it.

Expected behavior
I should expect to be able to have more than 1 json-schema-form pe component/page of my app.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Microsoft Windows 10 Pro Version 10.0.18363 Build 18363
• Browser: Chrome Version 81.0.4044.129 (Official Build) (64-bit)
• Version: "^0.1.4"

Log output covering before error and any error statements

Additional context

Detailed Description

Context
It would be nice to be able to have multiple json schema forms in one place.

Possible Implementation

[perezsolerj]

Hi,

Same issue happened to me, just want to share an easy workaround until the issue is solved if both forms are not shown simultaneously. My problem was I had multiple tabs with a form in each of them and changes in one form were affected by non-showed forms in other tabs. In order to solve this I wrapped the forms in ngIf keeping track of the active tab, so each non-showed form is destroyed. Fortunately this seems to work smoothly.

Hope this helps!

[mikeddol]

Hi,

Same issue happened to me, just want to share an easy workaround until the issue is solved if both forms are not shown simultaneously. My problem was I had multiple tabs with a form in each of them and changes in one form were affected by non-showed forms in other tabs. In order to solve this I wrapped the forms in ngIf keeping track of the active tab, so each non-showed form is destroyed. Fortunately this seems to work smoothly.

Hope this helps!

That's what I did but I don't think this is a long term solution. Luckily our use-case allowed to only show one form at a time and use *ngIf for that.

Still this does not feel like a proper solution..🤔

[MaikelJc]

hi,

the problem has been given since the component is sharing the same service, and when it is modified one is affected both, this is fixed by creating a new instance of the service for each child component and thus neither will be affected and both could be simultaneously without any * ngIf

what I did was create a new component that inherits from JsonSchemaFormComponent
and add the service in the providers and then my view called my new component as if it were the previous one and I can already have 2 independent forms

You can see the complete example here https://stackblitz.com/edit/multiple-ajsf

[zahmo]

Hi,
it seems to me that the following was changed/omitted in ajsf-core/src/lib/json-schema-form.component.ts
which was in the older versions
@Component({
....
providers: [ JsonSchemaFormService, JSON_SCHEMA_FORM_VALUE_ACCESSOR ],
})

I'm confident that this should resolve the issue, but of course needs to be tested...

[github-actions]

Stale issue

[ashikvarma11]

Hi,
it seems to me that the following was changed/omitted in ajsf-core/src/lib/json-schema-form.component.ts
which was in the older versions
@Component({
....
providers: [ JsonSchemaFormService, JSON_SCHEMA_FORM_VALUE_ACCESSOR ],
})

I'm confident that this should resolve the issue, but of course needs to be tested...

It worked for me. But I didn't provide the Token.

[hamzahamidi]

Fixed starting from https://www.npmjs.com/package/@ajsf/core/v/0.5.1-beta.3, see changelog https://github.com/hamzahamidi/ajsf/releases/tag/13.1.2