Matthew Seagle Matthew Seagle - 3 years ago 183
AngularJS Question

Form.io page redirect on form completion

I've been becoming more familiar with and learning angularjs because we started using form.io to directly embed created forms into a web page with a module.

I've gone through multiple examples on modules and event firing and which direction events are fired based on $emit and $broadcast. But really I'm trying to capture an event fired by the formio module.

Using Angular and displaying a form is easy enough in the body by simply placing the code below.

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


Their documentation goes on to read:


The formio module emits events at various times. These events are designed to allow developers to respond to events that occur within the formio generated forms. For example, after a user creates a new submission, you may want to change the view to display that submission or send them to a thank you page. You can do this by responding to the formSubmission event:


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


But whenever I try to create a controller the form does not load or it does not work. I'm definitely understanding this to be my lack of understanding in 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>


I figured capturing an event from a module should be pretty simple, so I must be missing something very easy.

Answer Source

I eventually figured this out myself. Because of my inexperience with angular and how it works it took more time and effort. Also my answer is more than likely (I know) not best practice for angular and how form.io is supposed to work, but it accomplishes exactly what I need.

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");
        });
    }]);

My body tag looks as such:

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download