Issue setData

[Fharhanamrin]

Description:

Environment Details:

• formBuilder Version:
• Browser:

• OS:

Expected Behavior

Actual Behavior

Steps to Reproduce

Insert Form => set Data form => does not match what was saved

Screenshot - (optional)

insert to db

appears after saving the data value label indonesia and label inggris wrong

 const fbEditor = document.getElementById("build-wrap");
    const templateSelect = document.getElementById("formTemplates");
    var fields = [{
            label: "Select",
            type: "select",
            subtype: "Select",
            icon: "✉",
            values: [{
                    label: "Label Indonesia",
                    value: "Label Inggris",
                    // selected: true
                },
                {
                    label: "",
                    value: "",
                },
                {
                    label: "",
                    value: "",
                }
            ]
        },
        {
            label: "FullName",
            type: "text",
            icon: "✉"
        }
    ];

    var options = {
        roles: {
            1: 'Form',
            2: 'Copy Data from Buyer'
        },
        replaceFields: [{
                type: "checkbox-group",
                label: "Checkbox",
                values: [{
                    label: "Label Indonesia",
                    value: "Label Inggris"
                }],
                icon: "☑"
            },
            {
                type: "radio-group",
                label: "Radio Group",
                values: [{
                    label: "Label Indonesia",
                    value: "Label Inggris"
                }],
                icon: "☑"
            }
        ],
        disableFields: [
            'autocomplete',
            'hidden',
            'number',
            'date',
            'paragraph',
            'select',
            'button'
        ],
        typeUserDisabledAttrs: {
            'text': [
                'name',
                // 'label',
                'subtype',
                // 'access',
                'helptext',
                // 'placeholder',
                'value',
                'maxlength',
                'description',
            ],
            'select': [
                'name',
                'label',
                'multiple',
                'class',
                'subtype',
                // 'access',
                'helptext',
                'placeholder',
                'value',
                'maxlength',
                'description',
            ],
            'checkbox-group': [
                'name',
                'label',
                'multiple',
                'class',
                'subtype',
                // 'access',
                'helptext',
                'placeholder',
                'value',
                'maxlength',
                'description',
                'toggle',
                'inline',
                'other'
                // 'options'
            ],
            'radio-group': [
                'name',
                'label',
                'multiple',
                'className',
                'subtype',
                // 'access',
                'helptext',
                'placeholder',
                'value',
                'maxlength',
                'description',
                'toggle',
                'inline',
                'other'
                // 'options'
            ],
            'file': [
                'label',
                'className',
                'name',
                'multiple',
                'class',
                // 'access',
                'description',
                // 'placeholder',
                'value'
            ],
            'header': [
                'label',
                'className',
                'name',
                'multiple',
                'class',
                // 'access',
                'description',
                'placeholder',
                'value'
            ]
        },
        typeUserAttrs: {
            '*': {
                lebel_id: {
                    label: 'Label Indonesia',
                    value: 'Label Indonesia',
                },
                label_en: {
                    label: 'Label Inggris',
                    value: 'Label Inggris',
                },
            },
            // file: {
            //     roles: {
            //         1: 'Form',
            //         2: 'Copy Data from Buyer'
            //     },
            // },
            text: {
                className: {
                    label: 'Responsive Web Page',
                    options: {
                        'col-md-1 form-control': 'col-md-1',
                        'col-md-2 form-control': 'col-md-2',
                        'col-md-3 form-control': 'col-md-3',
                        'col-md-4 form-control': 'col-md-4',
                        'col-md-5 form-control': 'col-md-5',
                        'col-md-6 form-control': 'col-md-6',
                        'col-md-7 form-control': 'col-md-7',
                        'col-md-8 form-control': 'col-md-8',
                        'col-md-9 form-control': 'col-md-9',
                        'col-md-10 form-control': 'col-md-10',
                        'col-md-11 form-control': 'col-md-11',
                        'col-md-12 form-control': 'col-md-12',
                    },
                    style: 'border: 1px solid red'
                },
                roles: {
                    1: 'Form'
                },
                // x:true
            },
            select: {
                className: {
                    label: 'Responsive Web Page',
                    options: {
                        'col-md-1 form-control': 'col-md-1',
                        'col-md-2 form-control': 'col-md-2',
                        'col-md-3 form-control': 'col-md-3',
                        'col-md-4 form-control': 'col-md-4',
                        'col-md-5 form-control': 'col-md-5',
                        'col-md-6 form-control': 'col-md-6',
                        'col-md-7 form-control': 'col-md-7',
                        'col-md-8 form-control': 'col-md-8',
                        'col-md-9 form-control': 'col-md-9',
                        'col-md-10 form-control': 'col-md-10',
                        'col-md-11 form-control': 'col-md-11',
                        'col-md-12 form-control': 'col-md-12',
                    },
                    style: 'border: 1px solid red'
                },
                roles: {
                    1: 'Form'
                },

            },
            'checkbox-group': {
                roles: {
                    1: 'Form',
                    2: 'Copy Data from Buyer'
                },
                className: {
                    label: 'Responsive Web Page',
                    options: {
                        'col-md-1': 'col-md-1',
                        'col-md-2': 'col-md-2',
                        'col-md-3': 'col-md-3',
                        'col-md-4': 'col-md-4',
                        'col-md-5': 'col-md-5',
                        'col-md-6': 'col-md-6',
                        'col-md-7': 'col-md-7',
                        'col-md-8': 'col-md-8',
                        'col-md-9': 'col-md-9',
                        'col-md-10': 'col-md-10',
                        'col-md-11': 'col-md-11',
                        'col-md-12': 'col-md-12',
                    },
                    style: 'border: 1px solid red'
                }
            }
        },
        onSave: function(evt, formData) {
            console.log("formbuilder update saved");
            UpdatePostCustomForm(formBuilder.actions.getData());
            // console.log(JSON.stringify(formBuilder.actions.getData()));
        }
    };
    const formBuilder = $(fbEditor).formBuilder({
        ...options,
        fields
    });

    // const formBuilder = $(fbEditor).formBuilder();

    $(document).ready(function() {
        GetDetailForm(formBuilder);
        document.getElementById('getJS').addEventListener('click', function() {
            console.log(JSON.stringify(formBuilder.actions.getData()));
        });
    });

    function GetDetailForm(formBuilder) {
        setTimeout(() => {
            console.log("load 1 kali aja ya");
            $.ajax({
                type: "POST",
                url: "<?= Url::to(['custom-form/get-custom-form-id']) ?>",
                data: {
                    id: "<?= $id_custom_form; ?>"
                },
                dataType: "JSON",
                success: function(response) {
                    console.log(response.data);
                    formBuilder.actions.setData(JSON.parse(response.data));
                }
            });
        }, 2000);
    }

[Fharhanamrin]

value from api
[{"type":"text","required":false,"label":"First Name","access":false,"lebel_id":"Nama Depan","label_en":"Nama Belakang","className":"col-md-4 form-control"}]

[lucasnetau]

Cannot replicate. What version are you using?

    window.formBuilder = await $('#fb-editor').formBuilder({
        typeUserAttrs: {
            '*': {
                lebel_id: {
                    label: 'Label Indonesia',
                    value: 'Label Indonesia',
                },
                label_en: {
                    label: 'Label Inggris',
                    value: 'Label Inggris',
                },
            },
        },
        formData: [],
        i18n: {
            location: "https://raw.githubusercontent.com/kevinchappell/formBuilder-languages/master/",
        },
    }).promise;

    window.formBuilder.actions.setData([{"type":"text","required":false,"label":"First Name","access":false,"lebel_id":"Nama Depan","label_en":"Nama Belakang","className":"col-md-4 form-control"}]);

[Fharhanamrin]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>

[lucasnetau]

Have you verified that your code is loading anything? Try setting values for all other fields and checking they load.

[Fharhanamrin]

does not change to replace the latest data from the data in the settings

[Fharhanamrin]

the value is not included in the input value?

[lucasnetau]

OK, I've track down the issue to a regression in commit bfa92e8

I'll prepare a PR to fix it shortly

[lucasnetau]

Please try the patch in #1531 or wait until it has been released for a bug fix.

[Fharhanamrin]

problem solved, thank you sir When will it be released into production?

[github-actions]

🎉 This issue has been resolved in version 3.19.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀