javascript - FORMIO - Angularjs - 更改表单对象时渲染错误

Question

当我尝试通过传递新的表单对象来更改表单对象时，formio 无法正确渲染表单这是一个演示:

angular
  .module("formioApp", ["ui.bootstrap", "ui.select", "formio", "ngFormBuilder", "ngJsonExplorer"])
  .run([
      "$rootScope",
      'formioComponents',
      '$timeout',
      function(
        $rootScope,
        formioComponents,
        $timeout
      ) {
          $rootScope.change = function () {
            console.log('Changing the form');
            $rootScope.form = {"components":[{"input":true,"label":"Valider","placeholder":"Libellé du bouton","tableView":false,"key":"submit","size":"md","leftIcon":"","rightIcon":"","block":false,"action":"submit","disableOnInvalid":false,"theme":"primary","type":"button","$$hashKey":"object:357"},{"input":true,"tableView":true,"inputType":"number","label":"Numéro point d'analyse","key":"numropointdanalyse","placeholder":"","prefix":"","suffix":"","defaultValue":"","protected":false,"persistent":true,"clearOnHide":true,"validate":{"required":false,"min":"","max":"","step":"any","integer":"","multiple":"","custom":""},"type":"number","$$hashKey":"object:548","conditional":{"show":"","when":null,"eq":""}},{"input":true,"tableView":true,"label":"items","key":"selectField","placeholder":"","data":{"values":[{"value":"1","label":"1","$$hashKey":"object:366"},{"value":"2","label":"2","$$hashKey":"object:369"},{"value":"3","label":"3","$$hashKey":"object:372"}],"json":"","url":"","resource":"","custom":""},"dataSrc":"values","valueProperty":"","defaultValue":"","refreshOn":"","filter":"","authenticate":false,"template":"<span>{{ item.label }}</span>","multiple":false,"protected":false,"unique":false,"persistent":true,"clearOnHide":true,"validate":{"required":false},"type":"select","$$hashKey":"object:312","conditional":{"show":"","when":null,"eq":""}},{"input":true,"tableView":true,"label":"","key":"selectboxesField","values":[{"value":"firstElement","label":"first element"},{"value":"secondElement","label":"second element"},{"value":"thirdElement","label":"third element"},{"value":"fourthElement","label":"fourth element"}],"inline":false,"protected":false,"persistent":true,"clearOnHide":true,"validate":{"required":false},"type":"selectboxes","$$hashKey":"object:201","conditional":{"show":"","when":null,"eq":""}},{"input":true,"tableView":true,"inputType":"text","inputMask":"","label":"Exemple d'un champs","key":"fieldexample","placeholder":"Exemple d'un champs","prefix":"","suffix":"","multiple":false,"defaultValue":"","protected":false,"unique":false,"persistent":true,"validate":{"required":false,"minLength":"","maxLength":"","pattern":"","custom":"","customPrivate":false},"conditional":{"show":false,"when":null,"eq":""},"type":"textfield","$$hashKey":"object:16","clearOnHide":true},{"input":true,"inputType":"checkbox","tableView":true,"hideLabel":true,"label":"check this","datagridLabel":true,"key":"checkthis","defaultValue":false,"protected":false,"persistent":true,"clearOnHide":true,"validate":{"required":false},"type":"checkbox","$$hashKey":"object:151","conditional":{"show":"","when":null,"eq":""}},{"input":true,"tableView":true,"label":"files","key":"files","image":true,"imageSize":"200","placeholder":"","multiple":false,"defaultValue":"","protected":false,"persistent":true,"clearOnHide":true,"type":"file","$$hashKey":"object:431","tags":[],"conditional":{"show":"","when":null,"eq":""}},{"input":true,"tableView":true,"label":"Champs de paragraphe","key":"message","placeholder":"Qu'est ce que vous pensez?","prefix":"","suffix":"","rows":3,"multiple":false,"defaultValue":"","protected":false,"persistent":true,"validate":{"required":false,"minLength":"","maxLength":"","pattern":"","custom":""},"type":"textarea","conditional":{"show":false,"when":null,"eq":""},"$$hashKey":"object:17","wysiwyg":false,"clearOnHide":true},{"type":"button","theme":"primary","disableOnInvalid":true,"action":"submit","block":false,"rightIcon":"","leftIcon":"","size":"md","key":"submit","tableView":false,"label":"Enregistrez","input":true,"$$hashKey":"object:18","placeholder":"Libellé du bouton"}],"display":"form"}
        }
        $rootScope.displays = [{
          name: 'form',
          title: 'Form'
        }, {
          name: 'wizard',
          title: 'Wizard'
        }];
        $rootScope.form = {
          components: [{
            "input": true,
            "tableView": true,
            "inputType": "text",
            "inputMask": "",
            "label": "First Name",
            "key": "firstName",
            "placeholder": "Enter your first name",
            "prefix": "",
            "suffix": "",
            "multiple": false,
            "defaultValue": "",
            "protected": false,
            "unique": false,
            "persistent": true,
            "validate": {
              "required": false,
              "minLength": "",
              "maxLength": "",
              "pattern": "",
              "custom": "",
              "customPrivate": false
            },
            "conditional": {
              "show": false,
              "when": null,
              "eq": ""
            },
            "type": "textfield"
          }, {
            "input": true,
            "tableView": true,
            "inputType": "text",
            "inputMask": "",
            "label": "Last Name",
            "key": "lastName",
            "placeholder": "Enter your last name",
            "prefix": "",
            "suffix": "",
            "multiple": false,
            "defaultValue": "",
            "protected": false,
            "unique": false,
            "persistent": true,
            "validate": {
              "required": false,
              "minLength": "",
              "maxLength": "",
              "pattern": "",
              "custom": "",
              "customPrivate": false
            },
            "conditional": {
              "show": false,
              "when": null,
              "eq": ""
            },
            "type": "textfield"
          }, {
            "input": true,
            "tableView": true,
            "label": "Message",
            "key": "message",
            "placeholder": "What do you think?",
            "prefix": "",
            "suffix": "",
            "rows": 3,
            "multiple": false,
            "defaultValue": "",
            "protected": false,
            "persistent": true,
            "validate": {
              "required": false,
              "minLength": "",
              "maxLength": "",
              "pattern": "",
              "custom": ""
            },
            "type": "textarea",
            "conditional": {
              "show": false,
              "when": null,
              "eq": ""
            }
          }, {
            type: 'button',
            theme: 'primary',
            disableOnInvalid: true,
            action: 'submit',
            block: false,
            rightIcon: '',
            leftIcon: '',
            size: 'md',
            key: 'submit',
            tableView: false,
            label: 'Submit',
            input: true
          }],
          display: 'form'
        };

        $rootScope.renderForm = true;
        $rootScope.$on('formUpdate', function(event, form) {
          angular.merge($rootScope.form, form);
          $rootScope.renderForm = false;
          setTimeout(function() {
            $rootScope.renderForm = true;
          }, 10);
        });

        var originalComps = _.cloneDeep($rootScope.form.components);
        originalComps.push(angular.copy(formioComponents.components.button.settings));
        $rootScope.jsonCollapsed = true;
        $timeout(function() {
          $rootScope.jsonCollapsed = false;
        }, 200);
        var currentDisplay = 'form';
        $rootScope.$watch('form.display', function(display) {
          if (display && (display !== currentDisplay)) {
            currentDisplay = display;
            if (display === 'form') {
              $rootScope.form.components = originalComps;
            } else {
              $rootScope.form.components = [{
                type: 'panel',
                input: false,
                title: 'Page 1',
                theme: 'default',
                components: originalComps
              }];
            }
          }
        });
      }
    ]);

https://jsfiddle.net/3mvckzcd/2/

您应该单击“更改”按钮来触发新对象

Answer 1

您找到解决方案了吗？

我确实找到了一种在大多数情况下都有效的解决方法/技巧。不过，如果能找到一个优雅的解决方案就好了。

<formio form="$ctrl.form" submission="$ctrl.formSubmission"></formio>

$timeout(function() {
  $ctrl.form = '';
  $ctrl.formSubmission = { 'data': {} };

  $timeout(function() {
    $ctrl.form = changedForm;
    $ctrl.formSubmission = {
      data: {...changed_data...}
    };
  });
});

我还找到了 Angular 4 版本的帖子，但它不适用于我的 Angular 1.6 应用程序: https://github.com/formio/angular-formio/issues/116#issuecomment-351583992