123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319 |
- <!DOCTYPE html>
- <html lang="en" ng-app="app">
- <head>
- <title>Easy form generator (Easy Form Viewer)</title>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <!-- head dep. : all css -->
- <link href="../bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
- <link href="../bootswatch/paper/bootstrap.min.css" rel="stylesheet">
- <link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet">
- <link href="../animate.css/animate.min.css" rel="stylesheet">
-
- <!--textAngular css is broken since 1.4.4-->
- <!--<link href='../textAngular/dist/textAngular.css' rel='stylesheet'> -->
- <!--use own to avoid bad surprise-->
- <link href='../easy-form-generator/dist/css/eda.textAngular.min.css' rel='stylesheet'>
- <link href='../nya-bootstrap-select/dist/css/nya-bs-select.min.css' rel='stylesheet' >
- <link href="../easy-form-generator/dist/css/eda.easyFormViewer.min.css" rel="stylesheet">
-
- <head>
- <body ng-controller="demoController as demoCtrl">
-
-
-
-
- <!-- Easy form viewer -->
- <eda-easy-form-viewer
- eda-easy-form-viewer-data-model="demoCtrl.dataModel"
- eda-easy-form-viewer-easy-form-generator-fields-model="demoCtrl.fieldsModel"
-
- eda-easy-form-viewer-submit-button-text="demoCtrl.submitButtonText"
- eda-easy-form-viewer-cancel-button-text="demoCtrl.cancelButtonText"
-
- eda-easy-form-viewer-submit-form-event="demoCtrl.submitFormEvent(dataModelSubmitted)"
- eda-easy-form-viewer-cancel-form-event="demoCtrl.cancelFormEvent()">
- </eda-easy-form-viewer>
- <!-- at the end of the body : all js -->
- <script type="text/javascript" src="../angular/angular.min.js"></script>
- <!-- YOUR APPLICATION WILL REPLACE THIS : -->
- <script type="text/javascript">
- (function(angular){
- 'use strict';
- angular
- .module('app', ['eda.easyFormViewer'])
- .controller('demoController', demoController);
-
-
- demoController.$inject = ['$timeout'];
- function demoController($timeout){
- var demoCtrl = this;
- demoCtrl.fieldsModel = testACompleteForm();
- demoCtrl.dataModel = {};
-
- demoCtrl.submitButtonText = 'Submit this form';
- demoCtrl.cancelButtonText = 'Cancel all';
-
- demoCtrl.submitFormEvent = submitFormEvent;
- demoCtrl.cancelFormEvent = cancelFormEvent;
-
- function submitFormEvent(dataModelSubmitted){
- console.info('Submit event : you can manage this event in your controller');
- console.dir( {'dataModelSubmitted' : dataModelSubmitted} );
- }
-
- function cancelFormEvent(){
- console.info('Cancel event : you can manage this event in your controller');
- }
-
- /**
- * an easy form generator model as demo
- *
- * here as a demo, it could be retrieved from a database
- */
- function testACompleteForm(){
- var _testACompleteForm = [
- {
- "line": 1,
- "activeColumn": 1,
- "columns": [
- {
- "numColumn": 1,
- "exist": true,
- "control": {
- "type": "header",
- "key": "header-1441426238190",
- "selectedControl": "Header",
- "subtype": "",
- "templateOptions": {
- "label": "",
- "required": false,
- "description": "EasyFormViewer : Loaded Form",
- "placeholder": "",
- "options": []
- },
- "formlyExpressionProperties": {},
- "formlyValidators": {},
- "formlyValidation": {},
- "edited": true
- }
- }
- ]
- },
- {
- "line": -1,
- "activeColumn": 1,
- "columns": [
- {
- "numColumn": 1,
- "exist": true,
- "control": {
- "type": "input",
- "key": "input-1441426278314",
- "selectedControl": "TextInput",
- "subtype": "",
- "templateOptions": {
- "label": "text input",
- "required": true,
- "description": "text input",
- "placeholder": "text input",
- "options": []
- },
- "formlyExpressionProperties": {},
- "formlyValidators": {},
- "formlyValidation": {
- "messages": {}
- },
- "edited": true
- }
- },
- {
- "numColumn": 2,
- "exist": true,
- "control": {
- "type": "input",
- "key": "input-1441426295927",
- "selectedControl": "Password",
- "subtype": "password",
- "templateOptions": {
- "label": "password",
- "required": true,
- "description": "password",
- "placeholder": "password",
- "options": []
- },
- "formlyExpressionProperties": {},
- "formlyValidators": {},
- "formlyValidation": {
- "messages": {}
- },
- "edited": true
- }
- },
- {
- "numColumn": 3,
- "exist": true,
- "control": {
- "type": "input",
- "key": "input-1441426313388",
- "selectedControl": "Email",
- "subtype": "email",
- "templateOptions": {
- "label": "email",
- "required": true,
- "description": "email",
- "placeholder": "email",
- "options": []
- },
- "formlyExpressionProperties": {},
- "formlyValidators": {
- "emailShape": {
- "message": "$viewValue + ' is not a valid email'"
- }
- },
- "formlyValidation": {
- "messages": {}
- },
- "edited": true
- }
- }
- ]
- },
- {
- "line": -1,
- "activeColumn": 1,
- "columns": [
- {
- "numColumn": 1,
- "exist": true,
- "control": {
- "type": "datepicker",
- "key": "datepicker-1441426325143",
- "selectedControl": "Date",
- "subtype": "",
- "templateOptions": {
- "label": "date",
- "required": true,
- "description": "date",
- "placeholder": "",
- "options": [],
- "datepickerPopup": "dd-MMMM-yyyy"
- },
- "formlyExpressionProperties": {},
- "formlyValidators": {},
- "formlyValidation": {
- "messages": {}
- },
- "edited": true
- }
- },
- {
- "numColumn": 2,
- "exist": true,
- "control": {
- "type": "basicSelect",
- "key": "basicSelect-1441426346817",
- "selectedControl": "BasicSelect",
- "subtype": "",
- "templateOptions": {
- "label": "",
- "required": false,
- "description": "",
- "placeholder": "",
- "options": [
- {
- "name": "opt1",
- "value": 0,
- "group": ""
- },
- {
- "name": "opt2",
- "value": 1,
- "group": ""
- },
- {
- "name": "opt3",
- "value": 2,
- "group": ""
- }
- ]
- },
- "formlyExpressionProperties": {},
- "formlyValidators": {},
- "formlyValidation": {
- "messages": {}
- },
- "edited": true
- }
- }
- ]
- },
- {
- "line": -1,
- "activeColumn": 1,
- "columns": [
- {
- "numColumn": 1,
- "exist": true,
- "control": {
- "type": "richEditor",
- "key": "richEditor-1441426365355",
- "selectedControl": "RichTextEditor",
- "subtype": "",
- "templateOptions": {
- "label": "",
- "required": false,
- "description": "",
- "placeholder": "",
- "options": []
- },
- "formlyExpressionProperties": {},
- "formlyValidators": {},
- "formlyValidation": {
- "messages": {}
- },
- "edited": true
- }
- }
- ]
- }
- ]
- return _testACompleteForm;
- }
-
- }
-
- })(angular);
- </script>
-
- <script type="text/javascript" src="../jquery/dist/jquery.min.js"></script>
-
- <script type="text/javascript" src="../bootstrap/dist/js/bootstrap.min.js"></script>
- <script type="text/javascript" src="../angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
- <script type="text/javascript" src="../easy-form-generator/dist/js/eda.easyFormViewer.min.js"></script>
- <script type="text/javascript" src='../textAngular/dist/textAngular-rangy.min.js'></script>
- <script type="text/javascript" src='../textAngular/dist/textAngular-sanitize.min.js'></script>
- <script type="text/javascript" src='../textAngular/dist/textAngular.min.js'></script>
- <script type="text/javascript" src='../lodash/lodash.min.js'></script>
- <script type="text/javascript" src="../angular-animate/angular-animate.min.js"></script>
- <script type="text/javascript" src="../angularjs-toaster/toaster.min.js"></script>
- <script type="text/javascript" src="../nya-bootstrap-select/dist/js/nya-bs-select.min.js"></script>
- <script type="text/javascript" src="../api-check/dist/api-check.min.js"></script>
- <script type="text/javascript" src="../angular-formly/dist/formly.min.js"></script>
- <script type="text/javascript" src="../angular-formly-templates-bootstrap/dist/angular-formly-templates-bootstrap.min.js"></script>
- </body>
- </html>
|