Angular Formly Example
// source http://jsbin.com/jemezi
/* global angular */
(function() {
'use strict';
var app = angular.module('formlyExample', ['formly', 'formlyBootstrap'], function config(formlyConfigProvider) {
// set templates here
formlyConfigProvider.setType({
name: 'whatever',
template: 'your template'
});
});
app.controller('MainCtrl', function MainCtrl(formlyVersion) {
var vm = this;
// funcation assignment
vm.onSubmit = onSubmit;
// variable assignment
vm.author = { // optionally fill in your info below :-)
name: 'Kent C. Dodds',
url: 'https://twitter.com/kentcdodds' // a link to your twitter/github/blog/whatever
};
vm.exampleTitle = 'expressionProperties'; // add this
vm.env = {
angularVersion: angular.version.full,
formlyVersion: formlyVersion
};
vm.model = {};
vm.fields = [
{
key: 'text',
type: 'input',
templateOptions: {
label: 'Text',
placeholder: 'Type here to see the other field become enabled...'
}
},
{
key: 'text2',
type: 'input',
templateOptions: {
label: 'Hey!',
placeholder: 'This one is disabled if there is no text in the other input'
},
expressionProperties: {
'templateOptions.disabled': '!model.text'
}
}
];
vm.originalFields = angular.copy(vm.fields);
// function definition
function onSubmit() {
alert(JSON.stringify(vm.model), null, 2);
}
});
})();
body {
margin: 20px
}
.formly-field {
margin-bottom: 16px;
}
<!DOCTYPE html>
<html>
<head>
<!-- Twitter bootstrap -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- apiCheck is used by formly to validate its api -->
<script src="http://rawgit.com/kentcdodds/apiCheck.js/master/dist/api-check.min.js"></script>
<!-- This is the latest version of angular (at the time this template was created) -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<!-- This is the current state of master for formly core. -->
<script src="http://rawgit.com/formly-js/angular-formly/master/dist/formly.js"></script>
<!-- This is the current state of master for the bootstrap templates -->
<script src="http://rawgit.com/formly-js/angular-formly-templates-bootstrap/master/dist/angular-formly-templates-bootstrap.js"></script>
<title>Angular Formly Example</title>
<style id="jsbin-css">
body {
margin: 20px
}
.formly-field {
margin-bottom: 16px;
}
</style>
</head>
<body ng-app="formlyExample" ng-controller="MainCtrl as vm">
<div>
<h1>angular-formly example: {{vm.exampleTitle}}</h1>
<div>
<!-- TODO put a description for your example here -->
This is the template for examples. Please clone this template, remove this text and insert something sensible :-)
</div>
<form ng-submit="vm.onSubmit()" novalidate>
<formly-form model="vm.model" fields="vm.fields">
<button type="submit" class="btn btn-primary submit-button">Submit</button>
</formly-form>
</form>
<h2>Model</h2>
<pre>{{vm.model | json}}</pre>
<h2>Fields <small>(note, functions are not shown)</small></h2>
<pre>{{vm.originalFields | json}}</pre>
</div>
<div style="margin-top:30px">
<small>
This is an example for the
<a href="https://formly-js.github.io/angular-formly">angular-formly</a>
project made with ♥ by
<strong>
<span ng-if="!vm.author.name || !vm.author.url">
{{vm.author.name || 'anonymous'}}
</span>
<a ng-if="vm.author.url" ng-href="{{::vm.author.url}}">
{{vm.author.name}}
</a>
</strong>
<br />
This example is running angular version "{{vm.env.angularVersion}}" and formly version "{{vm.env.formlyVersion}}"
</small>
</div>
<!-- Put custom templates here -->
<script id="jsbin-javascript">
/* global angular */
(function() {
'use strict';
var app = angular.module('formlyExample', ['formly', 'formlyBootstrap'], function config(formlyConfigProvider) {
// set templates here
formlyConfigProvider.setType({
name: 'whatever',
template: 'your template'
});
});
app.controller('MainCtrl', function MainCtrl(formlyVersion) {
var vm = this;
// funcation assignment
vm.onSubmit = onSubmit;
// variable assignment
vm.author = { // optionally fill in your info below :-)
name: 'Kent C. Dodds',
url: 'https://twitter.com/kentcdodds' // a link to your twitter/github/blog/whatever
};
vm.exampleTitle = 'expressionProperties'; // add this
vm.env = {
angularVersion: angular.version.full,
formlyVersion: formlyVersion
};
vm.model = {};
vm.fields = [
{
key: 'text',
type: 'input',
templateOptions: {
label: 'Text',
placeholder: 'Type here to see the other field become enabled...'
}
},
{
key: 'text2',
type: 'input',
templateOptions: {
label: 'Hey!',
placeholder: 'This one is disabled if there is no text in the other input'
},
expressionProperties: {
'templateOptions.disabled': '!model.text'
}
}
];
vm.originalFields = angular.copy(vm.fields);
// function definition
function onSubmit() {
alert(JSON.stringify(vm.model), null, 2);
}
});
})();
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<\!-- Twitter bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<\!-- apiCheck is used by formly to validate its api -->
<script src="//rawgit.com/kentcdodds/apiCheck.js/master/dist/api-check.min.js"><\/script>
<\!-- This is the latest version of angular (at the time this template was created) -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"><\/script>
<\!-- This is the current state of master for formly core. -->
<script src="//rawgit.com/formly-js/angular-formly/master/dist/formly.js"><\/script>
<\!-- This is the current state of master for the bootstrap templates -->
<script src="//rawgit.com/formly-js/angular-formly-templates-bootstrap/master/dist/angular-formly-templates-bootstrap.js"><\/script>
<title>Angular Formly Example</title>
</head>
<body ng-app="formlyExample" ng-controller="MainCtrl as vm">
<div>
<h1>angular-formly example: {{vm.exampleTitle}}</h1>
<div>
<\!-- TODO put a description for your example here -->
This is the template for examples. Please clone this template, remove this text and insert something sensible :-)
</div>
<form ng-submit="vm.onSubmit()" novalidate>
<formly-form model="vm.model" fields="vm.fields">
<button type="submit" class="btn btn-primary submit-button">Submit</button>
</formly-form>
</form>
<h2>Model</h2>
<pre>{{vm.model | json}}</pre>
<h2>Fields <small>(note, functions are not shown)</small></h2>
<pre>{{vm.originalFields | json}}</pre>
</div>
<div style="margin-top:30px">
<small>
This is an example for the
<a href="https://formly-js.github.io/angular-formly">angular-formly</a>
project made with ♥ by
<strong>
<span ng-if="!vm.author.name || !vm.author.url">
{{vm.author.name || 'anonymous'}}
</span>
<a ng-if="vm.author.url" ng-href="{{::vm.author.url}}">
{{vm.author.name}}
</a>
</strong>
<br />
This example is running angular version "{{vm.env.angularVersion}}" and formly version "{{vm.env.formlyVersion}}"
</small>
</div>
<\!-- Put custom templates here -->
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">body {
margin: 20px
}
.formly-field {
margin-bottom: 16px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">/* global angular */
(function() {
'use strict';
var app = angular.module('formlyExample', ['formly', 'formlyBootstrap'], function config(formlyConfigProvider) {
// set templates here
formlyConfigProvider.setType({
name: 'whatever',
template: 'your template'
});
});
app.controller('MainCtrl', function MainCtrl(formlyVersion) {
var vm = this;
// funcation assignment
vm.onSubmit = onSubmit;
// variable assignment
vm.author = { // optionally fill in your info below :-)
name: 'Kent C. Dodds',
url: 'https://twitter.com/kentcdodds' // a link to your twitter/github/blog/whatever
};
vm.exampleTitle = 'expressionProperties'; // add this
vm.env = {
angularVersion: angular.version.full,
formlyVersion: formlyVersion
};
vm.model = {};
vm.fields = [
{
key: 'text',
type: 'input',
templateOptions: {
label: 'Text',
placeholder: 'Type here to see the other field become enabled...'
}
},
{
key: 'text2',
type: 'input',
templateOptions: {
label: 'Hey!',
placeholder: 'This one is disabled if there is no text in the other input'
},
expressionProperties: {
'templateOptions.disabled': '!model.text'
}
}
];
vm.originalFields = angular.copy(vm.fields);
// function definition
function onSubmit() {
alert(JSON.stringify(vm.model), null, 2);
}
});
})();</script></body>
</html>