的形式.表单完成时的IO页面重定向
Form.io page redirect on form completion
因为我们开始使用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>
相关文章:
- 通过javascript重定向html传递php变量
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- 使用angular重定向到html页面
- 如何在chrome扩展中重定向到html页面
- 无法从jquery Mobile导航栏重定向到另一个页面
- ng视图外的链接重定向到ng视图内的页面
- 在phonegap应用程序内部重定向不起作用
- CORS-重定向到第二个GET正在接收的页面
- AJAX不会在文件上传后重定向到网页-POST方法
- 重定向时角度刷新浏览器
- 通过链接重定向不;我不在jstree中工作
- 根据select选项元素将表单重定向到不同的URL
- 通过JQuery重定向到另一个页面
- 重定向到“父窗口”
- 重定向iFrame中的父URL
- Ember-cli-Mirage 重定向 socket.io 客户端,该客户端注入 Mirage 中
- 如何防止与页面重定向 socket.io 多个连接
- 的形式.表单完成时的IO页面重定向
- 轨道.来自片段的表单片段.IO取消表单的重定向
- 使用分支.IO在javascript中重定向到app