Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- This is the latest version of angular (at the time this template was created) -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
    <!-- 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 current state of master for formly core. If you're using another version of formly, simply change "master" with your version number -->
    <script src="//rawgit.com/formly-js/angular-formly/master/dist/formly.js"></script>
    <!-- This is the current state of master for the vanilla templates -->
    <script src="//rawgit.com/formly-js/angular-formly-templates-bootstrap/master/dist/angular-formly-templates-bootstrap.js"></script>
    <title>Angular Formly issue</title>
  </head>
  <body ng-app="app" ng-controller="MainCtrl as vm" class="container">
    <h1>
      <a ng-href="{{::vm.baseUrl}}">Angular Formly</a>
      Bug
      <a ng-if="vm.issueNumber" ng-href="{{::vm.baseUrl}}/issues/{{::vm.issueNumber}}">
        #{{::vm.issueNumber}}
      </a>
      <small ng-if="!vm.issueNumber">
        <a ng-href="{{::vm.baseUrl}}/blob/master/CONTRIBUTING.md">
          Issue not provided
        </a>
      </small>
    </h1>
    <div>
      <h2>Environment:</h2>
      <div>
        Angular Version:
        <strong>
          <a ng-href="https://code.angularjs.org/{{::vm.env.angularVersion}}/docs/api">
            {{::vm.env.angularVersion}}
          </a>
        </strong>
      </div>
      <div>
        Formly Version:
        <strong>
          <a ng-href="{{::vm.baseUrl}}/tree/{{::vm.env.formlyVersion}}">
            {{::vm.env.formlyVersion}}
          </a>
        </strong>
      </div>
    </div>
    <div>
      <h2>Bug replication instructions:</h2>
      TODO: Please describe how to reproduce the issue here.
    </div>
    <hr />
    
    <div>
      <h2>Form</h2>
      <form ng-submit="vm.onSubmit()" novalidate>
        <formly-form model="vm.formData" fields="vm.formFields">
          <button type="submit" class="btn btn-primary">Submit</button>
        </formly-form>
      </form>
      <h2>Form Data</h2>
      <pre>{{vm.formData | json}}</pre>
    </div>
    <!-- TODO Put custom templates here -->
    <script type="text/ng-template" id="custom.html">
      <div>
        {{options.label}}
        <input ng-model="model[options.key]" class="form-control" />
      </div>
    </script>
    <script type="text/ng-template" id="example-directive.html">
      <div>
        {{options.label}}
        <input ng-model="model[options.key]" class="form-control" />
      </div>
    </script>
  </body>
</html>
 
(function() {
  /* global angular */
  
  'use strict';
  var app = angular.module('app', ['formly', 'formlyBootstrap'], function config(formlyConfigProvider) {
    // set templates here
    formlyConfigProvider.setType({
      name: 'custom',
      templateUrl: 'custom.html'
    });
  });
  
  app.controller('MainCtrl', function MainCtrl(formlyVersion) {
    var vm = this;
    // funcation assignment
    vm.onSubmit = onSubmit;
    // variable assignment
    vm.baseUrl = 'https://github.com/formly-js/angular-formly';
    vm.issueNumber = 0; // TODO put your issue number here...
    vm.env = {
      angularVersion: angular.version.full,
      formlyVersion: formlyVersion
    };
    vm.formData = {};
    vm.formFields = [
      {
        key: 'text',
        type: 'input',
        templateOptions: {
          label: 'Text'
        }
      },
      {
        key: 'custom',
        type: 'custom',
        templateOptions: {
          label: 'Custom inlined'
        }
      },
      {
        key: 'exampleDirective',
        template: '<div example-directive></div>',
        templateOptions: {
          label: 'Example Directive'
        }
      }
    ];
    // function definition
    function onSubmit() {
      alert(JSON.stringify(vm.formData), null, 2);
    }
  });
  
  app.directive('exampleDirective', function() {
    return {
      templateUrl: 'example-directive.html'
    };
  });
})();
Output

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

Dismiss x
public
Bin info
kentcdoddspro
0viewers