的形式.表单完成时的IO页面重定向

Form.io page redirect on form completion

本文关键字：重定向 IO 完成时 表单      更新时间：2023-09-26

因为我们开始使用form，我已经越来越熟悉和学习angularjs了。IO可以直接将创建的表单嵌入到带有模块的网页中。

我已经通过了关于模块和事件触发的多个示例，以及基于$emit和$broadcast触发哪个方向的事件。但实际上我正在尝试捕获由formio模块触发的事件。

使用Angular并在主体中显示表单很容易，只需将代码放在下面。

<formio src="'https://ofnatmqalooynpz.form.io/testform'"></formio>
<script type="text/javascript">
  angular.module('formioApp', ['formio']);
  angular.bootstrap(document, ['formioApp']);
</script>

他们的文档如下:

formio模块在不同的时间发出事件。这些事件被设计成允许开发人员响应在formio生成的表单中发生的事件。例如，在用户创建新提交后，您可能希望更改视图以显示该提交或将其发送到感谢页面。你可以通过响应formSubmission事件来做到这一点:

$scope.$on('formSubmission', function(err, submission) { /* ... */ });

但是每当我尝试创建一个控制器表单不加载或它不工作。我完全理解这是我对angular缺乏理解。

<script type="text/javascript">
  var formioApp = angular.module('formioApp', ['formio']);
  angular.bootstrap(document, ['formioApp']);
  formioApp.controller('formio',['$scope','$controller','$rootScope', function($scope,$controller,$rootScope) {
    $scope.$on('formSubmission', function(err, submission) { /* page redirect*/ });
  });
</script>

我认为从模块捕获事件应该非常简单，所以我一定错过了一些非常容易的东西。

我最终自己弄明白了。由于我对angular和它的工作方式缺乏经验，所以花了更多的时间和精力。而且我的答案很可能(我知道)不是角度和形式的最佳实践。io应该可以工作，但它完成的正是我需要的。

var formioApp = angular.module('formioApp', ['formio']);
    formioApp.controller('formio', ['$scope','$controller','$rootScope', function($scope,$controller,$rootScope) {
        console.log('here I am');
        $scope.resetForm = () => { console.debug('yes'); }
        $scope.$on('formSubmission', function(e, submission) {
            //e.preventDefault(); --stops submission to server
            e.stopPropagation();
            console.log('submitted');
            window.location.replace("/contact_thanks.html");
        });
    }]);

我的body标签看起来像这样:

<body ng-app="formioApp" ng-controller="formio"> 

Example
You can easily render a form within your Angular 2 application by referencing the URL of that form as follows.
<formio src='https://examples.form.io/example'></formio>
You can also pass the JSON form directly to the renderer as follows.
<formio [form]="{
    title: 'My Test Form',
    components: [
        {
            "type": "textfield",
            "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": true,
                "minLength": 2,
                "maxLength": 10,
                "pattern": "",
                "custom": "",
                "customPrivate": false
            },
            "conditional": {
                "show": "",
                "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": true,
                "minLength": 2,
                "maxLength": 10,
                "pattern": "",
                "custom": "",
                "customPrivate": false
            },
            "conditional": {
                "show": "",
                "when": null,
                "eq": ""
            }
        },
        {
            "input": true,
            "label": "Submit",
            "tableView": false,
            "key": "submit",
            "size": "md",
            "leftIcon": "",
            "rightIcon": "",
            "block": false,
            "action": "submit",
            "disableOnInvalid": true,
            "theme": "primary",
            "type": "button"
        }
    ]
}"></formio>
相关文章：