vormjs
Version:
Write your forms in JSON and HTML, use the same API.
168 lines (134 loc) • 5.44 kB
HTML
<html>
<head>
<title>Using a different theme with vorm</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<!-- vorm -->
<script src="../../vorm.js"></script>
<!-- end of vorm -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/languages/javascript.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/monokai_sublime.min
.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.min.css">
<script src="//cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js"></script>
<script id="app">
/*global angular*/
angular.module('app', [ 'vorm', 'ngMaterial', 'ngAnimate', 'ngMdIcons' ])
.controller('FormController', [ function ( ) {
var ctrl = this,
selectData = {
options: [
{
value: 'male',
label: 'Male'
},
{
value: 'female',
label: 'Female'
}
],
notSelectedLabel: 'Unspecified'
};
ctrl.values = {};
ctrl.handleSubmit = function ( values ) {
console.log('submitted with', values);
};
ctrl.handleChange = function ( ) {
console.log('change', arguments);
};
ctrl.getSelectData = function ( ) {
return selectData;
};
}])
.config([ 'vormTemplateServiceProvider', function ( vormTemplateServiceProvider ) {
vormTemplateServiceProvider.modifyModelTemplates(function ( el, type ) {
switch(el[0].tagName.toLowerCase()) {
case 'input':
el.addClass('md-input');
el.removeAttr('placeholder');
el.removeAttr('id');
el.attr('ng-model', 'model.value');
var wrap = angular.element(`
<md-input-container flex class="md-default-theme">
<vorm-label></vorm-label>
<vorm-replace></vorm-replace>
<div class="md-placeholder">
{{vormFieldConfig.getInvokedData('placeholder')}}
</div>
</md-input-container>
`);
wrap.find('vorm-replace').replaceWith(el);
el = wrap;
break;
case 'select':
el = angular.element(`
<md-select placeholder="{{vormControl.invokeData('notSelectedLabel')}}">
<md-option ng-value="option.value" ng-repeat="option in vormControl.getOptions() track by option.value">
{{option.label}}
</md-option>
</md-select>
`);
break;
}
return el;
});
vormTemplateServiceProvider.modifyTemplate(function ( el ) {
return angular.element(`
<div ng-class="vormField.getClassObj()">
<vorm-replace></vorm-replace3>
</div>
`);
});
}]);
</script>
<style>
</style>
</head>
<body ng-app="app">
<div class="col-md-6" style="padding: 20px"
form-template>
<form
vorm-form
vorm-submit="ctrl.handleSubmit($values)"
vorm-change="ctrl.handleChange($name)"
ng-controller="FormController as ctrl"
>
<fieldset class="form-group">
<vorm-field-template name="first_name" type="text" required="true" label="First name" data="{ placeholder: 'Placeholder text' }"></vorm-field-template>
<vorm-field-template name="last_name" type="text" required="true" label="Last name"></vorm-field-template>
<vorm-field-template name="age" type="number" label="Age"></vorm-field-template>
<vorm-field-template name="gender" type="select" data="ctrl.getSelectData()" label="Gender"></vorm-field-template>
</fieldset>
<md-button ng-disabled="!vormForm.isValid()" type="submit">
Submit
<ng-md-icon icon="done" size="10" ng-attr-style="fill: grey"></ng-md-icon>
</md-button>
</form>
<div style="color: #333; background-color: #f2f2f2; padding: 5px; margin-top: 20px">Open up your console to see some logging.</div>
</div>
<div class="col-md-6">
<pre style="tab-size: 4 !important;padding: 0px !important"><code form class="html"></code></pre>
<pre style="tab-size: 4 !important;padding: 0px !important"><code js></code></pre>
</div>
<script>
void function ( ) {
var script = document.querySelector('script#app'),
tpl = document.querySelector('[form-template]'),
jsCode = document.querySelector('code[js]'),
formCode = document.querySelector('code[form]');
jsCode.textContent = script.textContent;
formCode.textContent = tpl.innerHTML;
hljs.highlightBlock(jsCode);
hljs.highlightBlock(formCode);
}();
</script>
</body>
</html>