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>
    
​
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
​
    <script src="//npmcdn.com/api-check@latest/dist/api-check.js"></script>
​
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
​
​
    <script src="//npmcdn.com/angular-formly@latest/dist/formly.js"></script>
​
    
    <script src="//npmcdn.com/angular-formly-templates-bootstrap@latest/dist/angular-formly-templates-bootstrap.js"></script>
​
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.min.js"></script>
​
    
​
  <body ng-app="formlyExample" ng-controller="MainCtrl as vm">
    
    
    
    <div>
      
      <form novalidate>
        <formly-form form="exampleForm" model="vm.model" fields="vm.fields">
    
        </formly-form>
      </form>
     
    </div>
​
​
    Model </br>
     {{vm.model}}
    
    <script type="text/ng-template" id="input-template.html">
      {{to.label}}
      <input type="{{options.templateOptions.type || 'text'}}"
           class="form-control"
           id="{{id}}"
           formly-dynamic-name="id"
           formly-custom-validation="options.validators"
           placeholder="{{options.templateOptions.placeholder}}"
           aria-describedby="{{id}}_description"
           ng-required="options.templateOptions.required"
           ng-disabled="options.templateOptions.disabled"
           ng-model="model[options.key]">
    </script>
    
​
  </body>
​
</html>
​
 
body {
  margin: 20px
}
​
.formly-field {
  margin-bottom: 20px;
}
​
.validation {
  position: absolute;
  font-size: .8em;
  color: #a94442;
}
​
.formly-template-wrapper {
  position: relative;
}
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers