Displaying multiple forms on the same page (view).

[malwatte]

Describe the bug I need to display multiple forms on the same page. Backend returns an array of form & schema objects and I use *ngFor to display them. Forms load correctly when I open the page. But the issue is, when I click a button of a form, form layout changes. Data of the last form gets applied to other forms.

which template:

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

A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

[
    {
        "form": [{
            "helpvalue": "tast 1 text 1",
            "type": "help"
        }, {
            "helpvalue": "tast 1 text 2",
            "type": "help"
        }, {
            "key": "approval",
            "notitle": "true",
            "style": {
                "selected": "btn-success",
                "unselected": "btn-default"
            },
            "type": "radiobuttons"
        }],
        "schema": {
            "properties": {
                "approval": {
                    "enum": ["Approve", "Reject"],
                    "type": "string"
                }
            },
            "required": ["approval"],
            "title": "Approve task 1",
            "type": "object"
        }
    },
    {
        "form": [{
            "helpvalue": "tast 2 text 1",
            "type": "help"
        }, {
            "helpvalue": "tast 2 text 2",
            "type": "help"
        }, {
            "key": "approval2",
            "notitle": "true",
            "style": {
                "selected": "btn-success",
                "unselected": "btn-default"
            },
            "type": "radiobuttons"
        }],
        "schema": {
            "properties": {
                "approval2": {
                    "enum": ["Approve", "Reject"],
                    "type": "string"
                }
            },
            "required": ["approval2"],
            "title": "Approve task 2",
            "type": "object"
        }
    }
]

<div *ngFor="let task of tasks">
   <json-schema-form class="json-schema-form" framework="material-design" [schema]="task.schema" [form]="task.form">
   </json-schema-form>
</div>

Expected behavior Two form on the same page should work independently.

Screenshots

1. Just after loading the page
2. When I click the Approve button of the first form, form 1 gets replaced with form 2.
3. When I click Approve button of the first form, both Approve buttons gets activated.

Desktop (please complete the following information):

• OS: macOS Catalina 10.15.6
• Browser Chrome, Safari
• Version Chrome 84.0.4147.135, Safari 13.1.2

Additional context Angular 9.1

Appreciate if someone can help me.

[malwatte]

For the moment I'm doing this as a workaround, Created a wrapper component and provide JsonSchemaFormService.

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { JsonSchemaFormService } from '@ajsf/core';

@Component({
    selector: 'json-schema-form-wrapper',
    template: `<json-schema-form 
        framework="material-design" 
        [schema]="taskSchema" 
        [form]="taskForm" 
        (onSubmit)="submitUserTaskForm($event)">
    </json-schema-form>`,
    providers: [JsonSchemaFormService]
})
export class JsonSchemaFormWrapper implements OnInit {
    @Input() schema: any;
    @Input() form: any;
    @Output() onSubmit = new EventEmitter<any>();

    taskSchema: any;
    taskForm: any;

    ngOnInit() {
        this.taskSchema = this.schema;
        this.taskForm = this.form;
    }

    submitUserTaskForm($event) {
        this.onSubmit.emit($event);
    }
}

Then use it like this

<div *ngFor="let task of tasks">
<json-schema-form-wrapper [schema]="task.schema" [form]="task.form" (onSubmit)="submitUserTask($event)">
</json-schema-form-wrapper>
</div>

[malwatte]

Same issue #213

[github-actions[bot]]

Stale issue