2016-11-04 3 views
0

Ich habe mich mit angularjs vertraut gemacht und gelernt, weil wir form.io verwenden, um erstellte Formulare direkt in eine Webseite mit einem Modul einzubetten.Form.io Seite Umleitung auf Formularabschluss

Ich habe mehrere Beispiele für Module und Ereignisauslösung durchlaufen und welche Richtungsereignisse basierend auf $ emit und $ broadcast ausgelöst werden. Aber ich versuche wirklich, ein Event einzufangen, das vom Formio-Modul ausgelöst wurde.

Die Verwendung von Angular und das Anzeigen eines Formulars ist einfach, indem Sie einfach den folgenden Code eingeben.

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

Die Dokumentation geht zum:

Das Formio Modul sendet Ereignisse zu verschiedenen Zeiten. Diese Ereignisse ermöglichen es Entwicklern, auf Ereignisse zu reagieren, die in den von formio generierten Formularen auftreten. Nachdem ein Nutzer beispielsweise eine neue Einreichung erstellt hat, möchten Sie möglicherweise die Ansicht ändern, um diese Einreichung anzuzeigen, oder sie an eine Dankeseite senden. Sie können dies tun, indem Sie auf das formSubmission Ereignis reagiert:

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

Aber immer, wenn ich versuche, einen Controller zu erstellen das Formular nicht geladen wird oder es funktioniert nicht. Ich verstehe das definitiv als meinen Mangel an Verständnis in eckigen.

Ich dachte, das Erfassen eines Ereignisses von einem Modul sollte ziemlich einfach sein, so dass ich etwas sehr einfach vermissen muss.

Antwort

0

Ich fand schließlich selbst heraus. Aufgrund meiner Unerfahrenheit mit eckigen und wie es funktioniert, dauerte es mehr Zeit und Mühe. Auch meine Antwort ist mehr als wahrscheinlich (ich weiß) nicht beste Praxis für eckig und wie form.io soll funktionieren, aber es erfüllt genau das, was ich brauche.

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

Mein Körper-Tag sieht als solche:

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

-1
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> 
+0

Wenn ich einfach bin versucht, das Formular auf der Seite zu machen, so einfach ist. Ich versuche, das Ereignis zu erfassen, das das Modul auslöst, um nach dem Ausfüllen des Formulars eine Seitenumleitung durchzuführen. Welches ist die in ihrer Dokumentation beschriebene Methode? –