Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
  <head>
    <!-- Twitter bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://rawgit.com/vitalets/angular-xeditable/master/dist/css/xeditable.css" rel="stylesheet">
    <!-- apiCheck is used by formly to validate its api -->
    <script src="//rawgit.com/kentcdodds/api-check/latest/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>
​
    <!-- This is the current state of master for formly core. -->
    <script src="//rawgit.com/formly-js/angular-formly/latest/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/latest/dist/angular-formly-templates-bootstrap.js"></script>
    <script src="https://rawgit.com/vitalets/angular-xeditable/master/dist/js/xeditable.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 of using <code>formGroup</code>s and the <code>className</code> property to have an advanced layout.
      </div>
      <hr />
      <form  novalidate="  ">
        <formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form" editable-form onaftersave="vm.onSubmit()" root-el="form">
          <button type="button" class="btn btn-default" ng-click="vm.form.$show()" ng-show="!vm.form.$visible">
            Edit
          </button>
          <!-- buttons to submit / cancel form -->
          <span ng-show="vm.form.$visible">
            <button type="submit" class="btn btn-primary" ng-disabled="vm.form.$waiting">
              Save
            </button>
            <button type="button" class="btn btn-default" ng-disabled="vm.form.$invalid" ng-click="vm.form.$cancel()">
              Cancel
            </button>
          </span>
        </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>
      <h2>Form</h2>
      <pre>{{vm.form | json}}</pre>
    </div>
​
​
  </body>
​
</html>
​
Output 300px

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

Dismiss x
public
Bin info
kentcdoddspro
0viewers