Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    <!-- Twitter bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet">
    <!-- apiCheck is used by formly to validate its api -->
    <script src="//rawgit.com/kentcdodds/apiCheck.js/master/dist/api-check.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.4.4/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.js"></script>
    <!-- This is the current state of master for formly core. -->
    <script src="https://rawgit.com/formly-js/angular-formly/latest/dist/formly.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.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>
        This is an example I created for <a href="https://youtu.be/FvIj5n7dF2Y">this hangout on air</a> with
        <a href="https://www.codementor.io/">Codementor.io</a> office hours. It demonstrates several features of angular-formly.
      </div>
      <hr />
      <form ng-submit="vm.onSubmit()" novalidate>
        <formly-form model="vm.model" fields="vm.fields" form="vm.form" options="vm.options">
          <button type="submit" class="btn btn-primary submit-button">Submit</button>
          <button type="button" class="btn btn-default submit-button" ng-click="vm.options.resetModel()">Reset</button>
        </formly-form>
      </form>
      <hr />
      <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>
    <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 type="text/ng-template" id="my-messages.html">
      <formly-transclude></formly-transclude>
      <div class="my-messages" ng-messages="fc.$error" ng-if="options.formControl.$touched">
        <div class="some-message" ng-message="{{::name}}" ng-repeat="(name, message) in ::options.validation.messages">
          {{message(fc.$viewValue, fc.$modelValue, this)}}
      </div>
      </div>
    </script>
  </body>
</html>
 
body {
  margin: 20px
}
.formly-field {
  margin-bottom: 16px;
}
/* messages fanciness */
.my-messages {
  position: relative;
}
.my-messages, .some-message {
  opacity: 1;
  transition: .3s linear all;
}
.some-message {
  font-size: .8em;
  position: absolute;
  width: 100%;
  color: #a94442;
}
.my-messages.ng-enter.ng-enter-active,
.some-message.ng-enter.ng-enter-active {
  opacity: 1;
  top: 0;
}
.my-messages.ng-enter,
.some-message.ng-enter {
  opacity: 0;
  top: -10px;
}
.my-messages.ng-leave,
.some-message.ng-leave {
  opacity: 1;
  top: 0;
}
.my-messages.ng-leave-active,
.some-message.ng-leave-active {
  opacity: 0;
  top: -10px;
}
 
var app = angular.module('formlyExample', ['formly', 'formlyBootstrap', 'mgo-angular-wizard', 'ui.bootstrap', 'ngAnimate', 'ngMessages'], function config(formlyConfigProvider) {
        // set templates here
        formlyConfigProvider.setType({
            name: 'whatever',
            template: 'your template'
        });
    });
    app.run(function (formlyConfig) {
        formlyConfig.setType({
            name: 'typeahead',
            template: '<input type="text" name="model[options.key]" ng-model="model[options.key]" typeahead="item for item in to.options | filter:$viewValue | limitTo:8" class="form-control">',
            wrapper: ['bootstrapLabel', 'bootstrapHasError'],
        });
    });
    app.controller('MainCtrl', function MainCtrl(formlyVersion, USStates) {
        var vm = this;
        // funcation assignment
        vm.finishWizard = finishWizard;
        // 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 = 'With angular-wizard'; // add this
        vm.env = {
            angularVersion: angular.version.full,
            formlyVersion: formlyVersion
        };
        vm.model = {};
        vm.fields = {
            step1: [{
                className: 'display-flex',
                fieldGroup: [
                  {
                      className: 'flex-4',
                      type: 'input',
                      key: 'Client.FirstName',
                      templateOptions: {
                          label: 'First Name'
                      }
                  },
                  {
                      className: 'flex-1',
                      type: 'input',
                      key: 'Client.MiddleInitial',
                      templateOptions: {
                          label: 'Middle Initial'
                      }
                  },
                  {
                      className: 'flex-4',
                      type: 'input',
                      key: 'Client.LastName',
                      templateOptions: {
                          label: 'Last Name'
                      }
                  }
                ]
            }, {
                template: '<hr /><div><strong>Address:</strong></div>'
            }, {
                className: 'display-flex',
                fieldGroup: [
                {
                    className: 'flex-1',
                    type: 'input',
                    key: 'Client.AddressLine1',
                    templateOptions: {
                        label: 'Address Line 1'
                    }
                }]
            },{
                 className: 'display-flex',
                 fieldGroup: [
                 {
                     className: 'flex-1',
                     type: 'input',
                     key: 'Client.AddressLine2',
                     templateOptions: {
                         label: 'Address Line 2'
                     }
                 }]
             },{
                className: 'display-flex',
                fieldGroup: [ {
                    className: 'flex-1',
                    type: 'input',
                    key: 'Client.City',
                    templateOptions: {
                        label: 'City'
                    }
                }, {
                    className: 'flex-1',
                    type: 'typeahead',
                    key: 'Client.State',
                    templateOptions: {
                        label: 'State',
                        options: USStates
                    }
                },{
                    className: 'flex-1',
                    type: 'input',
                    key: 'Client.Zip',
                    templateOptions: {
                        type: 'number',
                        label: 'Zip',
                        max: 99999,
                        min: 0,
                        pattern: '\\d{5}'
                    }
                }
                ]
            }],
            step2: [{
                className: 'display-flex',
                fieldGroup: [{
                    className: 'flex-1',
                    type: 'input',
                    key: 'firstName',
                    templateOptions: {
                        label: 'First Name'
                    }
                },
                  {
                      className: 'flex-1',
                      type: 'input',
                      key: 'lastName',
                      templateOptions: {
                          label: 'Last Name'
                      },
                      expressionProperties: {
                          'templateOptions.disabled': '!model.firstName'
                      }
                  }
                ]
            }]
        };
        vm.originalFields = angular.copy(vm.fields);
        // function definition
        function finishWizard() {
            alert(JSON.stringify(vm.model), null, 2);
        }
    });
    app.constant('USStates', ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']);
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kizzlebotpro
0viewers