<!DOCTYPE html>
<html>
<head>
<!-- Each of these scripts are the latest version of the library at the time this jsbin was created -->
<!-- Twitter bootstrap -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<!-- api-check is a dependency of angular-formly -->
<script src="bower_components/api-check/dist/apiCheck.min.js"></script>
<!-- angular.js is a dependency of angular-formly (obviously) -->
<script src="bower_components/angular/angular.min.js"></script>
<!-- This is angular-formly -->
<script src="bower_components/angular-formly/dist/formly.min.js"></script>
<!-- This is a bootstrap template libraray giving us some pre-defined types for bootstrap -->
<script src="//rawgit.com/formly-js/angular-formly-templates-bootstrap/4.0.3/dist/angular-formly-templates-bootstrap.js"></script>
<title>Angular Formly Lesson</title>
</head>
<body ng-app="formlyExample" ng-controller="MainCtrl as vm">
<div>
<h1>
angular-formly: Introduction<br />
<small>Egghead.io lesson by @kentcdodds</small>
</h1>
<form name="vm.form" ng-submit="vm.onSubmit()" novalidate>
<formly-form model="vm.model" fields="vm.fields"></formly-form>
<button type="submit" class="btn btn-primary submit-button">Submit</button>
</form>
<form name="vm.form" ng-submit="vm.onSubmit()" novalidate>
<div class="form-group">
<label for="firstName">First Name</label>
<input ng-model="vm.model.firstName" id="firstName" name="firstName" class="form-control" />
</div>
<button type="submit" class="btn btn-primary submit-button">Submit</button>
</form>
<h2>Model</h2>
<pre>{{vm.model | json}}</pre>
<h2>Fields <small>(note, functions are not shown)</small></h2>
<pre>{{vm.originalFields | json}}</pre>
<h2>Form</h2>
<pre>{{vm.form | json}}</pre>
</div>
<script src="app.js"></script>
</body>
</html>
/* global angular */
(function() {
'use strict';
var app = angular.module('formlyExample', ['formly', 'formlyBootstrap']);
app.controller('MainCtrl', function MainCtrl() {
var vm = this;
// funcation assignment
vm.onSubmit = onSubmit;
// variable assignment
vm.model = {
firstName: 'Obi Wan',
something: {name: "default",value:"default"}
};
vm.fields = [
{
type: 'input',
key: 'firstName',
templateOptions: {
label: 'First Name'
}
},
{
template: '<hr />'
},
{
type: 'select',
key: 'something',
templateOptions: {
label: 'Select Somthing',
options: [
{name: "wan", value: "Wan"},
{name: "obi", value: "Obi"},
{name: "Yui", value: "yui"}
]
}
}
];
// copy fields because formly adds data to them
// that is not necessary to show for the purposes
// of this lesson
vm.originalFields = angular.copy(vm.fields);
// function definition
function onSubmit() {
alert(JSON.stringify(vm.model), null, 2);
}
});
})();
