Skip to content

Instantly share code, notes, and snippets.

@MacKentoch

MacKentoch/tip-store-angular-formyl-fields-model-into-database.html

Last active December 30, 2015 06:17
Show Gist options
  • Save MacKentoch/d81616733e3fd423cfaf to your computer and use it in GitHub Desktop.
Save MacKentoch/d81616733e3fd423cfaf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tip-store-angular-formyl-fields-model-into-database.html
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Erwan DATIN">
<!-- angularjs -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<!-- angular formly -->
<!-- api-check = formly needed : IMPORTANT : always before angular formly -->
<script src="https://npmcdn.com/api-check@latest/dist/api-check.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-formly/6.26.8/formly.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-formly-templates-bootstrap/6.2.0/angular-formly-templates-bootstrap.min.js"></script>
<!-- textAngular -->
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.4.6/textAngular-rangy.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.4.6/textAngular-sanitize.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.4.6/textAngular.min.js'></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- textAngular CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.4.6/textAngular.css">
<!-- font-awesome for textAngualr icons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- jquery and bootstrap -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body >
<div class="container" ng-controller="demoCtrl as vm">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<!-- formly here -->
<form ng-submit="vm.onSubmit()">
<formly-form model="vm.model" fields="vm.myCustomFields">
<span class="pull-right">
<button class="btn btn-primary" type="submit">submit</button>
<button class="btn btn-primary" type="cancel">cancel</button>
</span>
</formly-form>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
(function() {
'use strict';
//your application, here an example
angular
.module('demoApp', [
'formly',
'formlyBootstrap',
'textAngular'
])
.config(configFct)
.controller('demoCtrl', demoCtrlFct);
//config : as I use textAngular within angular formly I need to create a new formly type
//-> I will be able to use "richEditor" in any form later in my controller for instance
configFct.$inject = ['formlyConfigProvider'];
function configFct(formlyConfigProvider){
formlyConfigProvider.setType(
{
name : 'richEditor',
template: '<text-angular ng-model="model[options.key]"></text-angular><br/>'
}
);
}
//controller
demoCtrlFct.$inject = [];
function demoCtrlFct(){
var self = this;
self.myCustomFields = initMyCustomFieldsModel(); //fields model that describes a form
self.model = {}; //data model
self.onSubmit = onSubmit;
console.info('test');
console.dir(self.myCustomFields);
function onSubmit() {
console.log('form submitted:\n');
console.dir(self.model);
}
function initMyCustomFieldsModel(){
var _model = [
{
template: '<div class="row"><div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><h2 class="text-center">Here is a title<h2></div></div><hr/>'
},
{
className: 'row',
fieldGroup:
[
{
className: 'col-xs-4',
type: 'input',
key: 'input-1434197049136',
templateOptions: {
label: 'a simple input : ',
required: true,
placeholder: 'an input enter anything',
description: 'a simple input'
}
} ,
{
className: 'col-xs-4',
type: 'input',
key: 'input-1434197076900',
templateOptions: {
type: 'password',
label: 'a password input :',
required: true,
placeholder: 'enter a password',
description: 'a password input',
}
} ,
{
className: 'col-xs-4',
key: 'email-1434197087777',
type: 'input',
templateOptions: {
type: 'email',
label: 'an Email address',
placeholder: 'Enter email',
description: 'an email, why not?!',
}
}
]},
{
className: 'col-xs-12',
type: 'richEditor',
key: 'richEditor-1434197187499',
templateOptions: {
required: false,
'rows': 7
},
},
{
className: 'row',
fieldGroup:
[
{
className: 'col-xs-6',
type: 'select',
key: 'select-1434197282423',
templateOptions: {
type: '',
label: 'A Basic select',
required: false,
description: 'a basic select',
options:
[
{
name: 'option 1',
value: 0
} ,
{
name: 'option 2',
value: 1
} ,
{
name: 'other 1',
value: 2
} ,
{
name: 'other 2',
value: 3
}
]
}
},
{
className: 'col-xs-6',
type: 'select',
key: 'select-1434197823446',
templateOptions: {
type: 'grouped',
label: 'A nice grouped select',
required: false,
description: 'a grouped select',
options:
[
{
name: 'option 1',
value: 0,
group: 'group for option',
} ,
{
name: 'option 2',
value: 1,
group: 'group for option',
} ,
{
name: 'other 1',
value: 2,
group: 'group for others',
} ,
{
name: 'other 2',
value: 3,
group: 'group for others',
}
]
}
}
]
}
];
return _model;
}
}
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment