<!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); } }); })();