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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
​
    <!-- apiCheck is used by formly to validate its api -->
    <script src="http://npmcdn.com/api-check"></script>
    <!-- This is the latest version of angular (at the time this template was created) -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
​
    <!-- This is the current state of master for formly core. -->
    <script src="http://npmcdn.com/angular-formly"></script>
    <!-- This is the current state of master for the bootstrap templates -->
    <script src="http://npmcdn.com/angular-formly-templates-bootstrap"></script>
​
    <!-- additional dependencies go here -->
​
    <title>Angular Formly Question</title>
  </head>
  <body ng-app="formlyQuestion" ng-controller="MainCtrl as vm">
    <div>
      <h1>angular-formly question</h1>
      <small>
        angular: {{vm.env.angularVersion}} |
        angular-formly: {{vm.env.formlyVersion}}
      </small>
      <hr/>
​
      <h2>Why is the directive behaving differently from the type?</h2>
      <p>both input fields are generated using the saim plain-text.html template. One is created using
        <code>
          formlyConfig.setType({
            name: 'plainText',
            templateUrl: 'plain-text.html'
          });
        </code>
        the other using <code>app.directive('plainText', function () {
        return {
          scope: false,
          templateUrl: 'plain-text.html'
        };
        });</code>.</p>
      <p>Both fields are required but the attribute is only set on the fist input (input as type).</p>
      <hr/>
​
      <div>
        <h2>Form</h2>
        <form ng-submit="vm.onSubmit()" name="vm.form" novalidate>
          <formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form">
            <button type="submit" class="btn btn-primary submit-button" ng-disabled="vm.form.$invalid">Submit
            </button>
            <button type="button" class="btn btn-default" ng-click="vm.options.resetModel()">Reset</button>
          </formly-form>
        </form>
      </div>
​
      <hr/>
​
      <div>
        <h2>Model Value</h2>
        <pre>{{vm.model | json}}</pre>
      </div>
​
      <hr/>
​
      <div>
        <h2>Form</h2>
        <pre>{{vm.form | json}}</pre>
      </div>
​
      <hr/>
​
      <div>
        <h2>Fields
          <small>(note, functions are not shown)</small>
        </h2>
        <pre>{{vm.originalFields | json}}</pre>
      </div>
​
      <hr/>
​
      <div>
        <h2>Form State</h2>
        <pre>{{vm.options.formState | json}}</pre>
      </div>
    </div>
​
    <!-- Put custom templates here -->
​
    <script type="text/ng-template" id="plain-text.html">
    <div class="form-group">
        <label for="{{::id}}" class="col-sm-2 control-label">{{options.templateOptions.label}}</label>
        <div class="col-sm-10">
            <input id="{{::id}}" name="{{::id}}" type="text" class="form-control" ng-model="model[options.key]"/>
      </div>
      </div>
    </script>
​
  </body>
</html>
 
​
    /* global angular */
    (function () {
​
        'use strict';
​
        console.clear(); // <-- keep the console clean in jsbin
​
        var app = angular.module('formlyQuestion', [
            // additional dependencies go here
            'formly',
            'formlyBootstrap'
        ]);
​
        app.run(function (formlyConfig) {
            // set types here
            formlyConfig.setType({
                name: 'plainText',
                templateUrl: 'plain-text.html'
            });
        });
​
        app.directive('plainText', function () {
            return {
                scope: false,
                templateUrl: 'plain-text.html'
            };
        });
​
        app.controller('MainCtrl', function MainCtrl(formlyVersion) {
            var vm = this;
            // funcation assignment
            vm.onSubmit = onSubmit;
​
            // variable assignment
            vm.env = getEnv();
            vm.model = {};
            vm.options = { formState: {} };
            vm.fields = getFields();
            vm.originalFields = angular.copy(vm.fields);
​
            // function definition
            function getFields() {
                // return your fields here
                return [
                    {
                        key: 'first',
                        type: 'plainText',
                        templateOptions: {
                            label: 'Input as type',
                            required: true
                        }
                    },
                    {
                        key: 'second',
                        template: '<plain-text>',
                        templateOptions: {
                            label: 'Input as directive',
                            required: true
                        }
                    }
                ];
            }
​
​
            function onSubmit() {
                vm.options.updateInitialValue();
                alert(JSON.stringify(vm.model), null, 2);
            }
​
            function getEnv() {
                return {
                    angularVersion: angular.version.full,
                    formlyVersion: formlyVersion
                };
            }
        });
​
    })();
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers