从现有数据构建表单时出错 "getData is not a function"

Question

我目前正在使用表单生成器并运行遇到以下错误

fb.actions.getData is not a function

每当我从现有表单数据启动表单生成器，然后尝试再次保存表单时（例如，在对表单进行更改之后。）

这是我用来构建（多页）表单的代码。

$.get(reqURL, function(res) {
    if (res && JSON.parse(res).success) {
        // Parse the data to render.
        var formData = JSON.parse(res).data;
        var formContainer = document.getElementById('formBuilder');
        var $formContainer = $(formContainer);
        $.each(formData, function (idx, val) {
            var jsonString;
            if (typeof(val) !== 'string') {
                val = val.toString();
                val = '[' + val + ']';
            }
            var bIsArray = false;
            $.each(JSON.parse(val), function (sub_idx, sub_val) {
                if (sub_idx === 0) {
                    jsonString = JSON.stringify(sub_val);
                } else {
                    jsonString = jsonString + ',' + JSON.stringify(sub_val);
                    bIsArray = true;
                }
            });
            var jsonFormData = JSON.parse('[' + jsonString + ']');
            jsonFormData = JSON.stringify(jsonFormData);
            var formRenderOpts = {
                formData: jsonFormData,
                dataType: 'json'
            };


            var $addPageTab = $('#add-page-tab');
            var tabCount = document.getElementById("tabs").children.length,
            tabId = "page-" + tabCount.toString(),
            $newPageTemplate = $(document.getElementById("new-page")),
            $newPage = $newPageTemplate
            .clone()
            .attr("id", tabId)
            .addClass("fb-editor"),
            $newTab = $addPageTab
            .clone()
            .removeAttr("id"),
            $tabLink = $("a", $newTab)
            .attr("href", "#" + tabId)
            .text("Seite " + tabCount);
            var $newInstance = $newPage.formBuilder(formRenderOpts);
            $newInstance.promise.then(function() {
                fbInstances.push($newInstance);
                $newPage.insertBefore($newPageTemplate);
                $newTab.insertBefore($addPageTab);
                $fbPages.tabs("refresh");
                $fbPages.tabs("option", "active", tabCount - 1);
                console.log($newInstance); // Returns {actions: {…}, promise: Promise} for the first page with actions being undefined and {actions: {…}} with actions defined for page 2
            });             
        });

    }
});

这是我用来保存表格的代码：

$(document.getElementById("save-all")).click(function () {  
    const allData = fbInstances.map(fb => {
      console.log(fb.actions.getData()); // This line is throwing the error
      return fb.formData;
    });

    saveFormData(allData);
});

我读过不同的主题，声称我必须使用 .getData() 部分与承诺相结合，但由于某种原因我无法让它工作。任何帮助将不胜感激。

Answer 1

解决方案是将第一个代码块的片段编辑为以下内容：

var $newInstance = $newPage.formBuilder(formRenderOpts);
$newInstance.promise.then(function(instance) {
    fbInstances.push(instance);
    $newPage.insertBefore($newPageTemplate);
    $newTab.insertBefore($addPageTab);
    $fbPages.tabs("refresh");
    $fbPages.tabs("option", "active", tabCount - 1);
});

它没有将正确的实例添加到数组中。

从现有数据构建表单时出错 "getData is not a function"

Error "getData is not a function" when building form from existing data

javascript

jquery

formbuilder