demo-form.html

<div class="panel panel-info" style="padding:4px;">
  <link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
  <link rel="stylesheet" href="bower_components/angular-bootstrap/ui-bootstrap-csp.css">
  <div class="panel panel-danger" data-ng-show="errors.length>0">
    <div><h3 style="margin-left:4px; margin-top: 0px" class="text-danger">UNHANDLED ERRORS</h3></div>
    <div style="margin-left:4px; margin-top: 0px" data-ng-repeat="e in errors" data-ng-show="errors.length>0">
      <br/>
        <span>
          {{e}}
        </span>
    </div>
  </div>

  <div class="breadcrumb">
    <h3>This is a simple form with very basic features</h3>
  </div>
  <form name="vm.form" novalidate>
    <tabset>
      <tab ng-repeat="tab in tabs"
           heading="{{tab.title}}"
           active="tab.active"
           disable="tab.disabled"
           select="tabSelected($index)">
        <formly-form model="tab.form.model" fields="tab.form.fields" form="form" options="tab.form.options">
        </formly-form>
      </tab>
    </tabset>
    <div class="alert alert-success" ng-show="showSuccessMsg">
      <button type="button" ng-click="isBusy=false; showSuccessMsg=false" class="close">×</button>
      <strong>Hurrah!</strong> Form saved successfully
    </div>
    <div style="min-height:20px">
      <span class="pull-right">
          <button type="submit" ng-disabled="isBusy" class="btn btn-primary submit-button"
                  ng-click="submitForm()">Save
          </button>
          <button type="button" class="btn btn-default" ng-click="isBusy=false; showSuccessMsg=false">Cancel
          </button>
        </span>
    </div>
  </form>
  <hr/>
  <a target="_blank"  href="https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-app-launcher-info-dialog">
    *Enable CORS since rest api is demo.openmrs.org (different domain)
  </a>

  <!-- important scripts Section -->
  <!-- Put custom templates here -->
  <script type="text/ng-template" id="error-messages.html">
    <formly-transclude></formly-transclude>
    <div class="error-messages" ng-messages="fc.$error" ng-if="form.$submitted || options.formControl.$touched">
      <div class="message" ng-message="{{::name}}" ng-repeat="(name, message) in ::options.validation.messages"
           style="color:red;">
        {{message(fc.$viewValue, fc.$modelValue, this)}}
      </div>
    </div>

  </script>
  <!--
  Custom template to allows representation of repeatSection
  in a form.
  I would love to move this in it own template but initial
  tests did not work. Will give some further consultations
  later.....
  -->
  <script type="text/ng-template" id="repeatSection.html">
    <div class="panel panel-default">
      <div class="panel-heading">
        {{to.label}}
      </div>
      <div class="panel-body">
        <!--loop through each element in model array-->
        <div class="{{hideRepeat}}">
          <div class="repeatsection" ng-repeat="element in model[options.key]" ng-init="fields = copyFields(to.fields)">
            <formly-form fields="fields"
                         model="element"
                         bind-name="'formly_ng_repeat' + index + $parent.$index">
            </formly-form>
            <p>
              <button type="button" class="btn btn-sm btn-danger" ng-click="model[options.key].splice($index, 1)">
                Remove
              </button>
            </p>
            <hr>
          </div>
          <p class="AddNewButton">
            <button type="button" class="btn btn-primary" ng-click="addNew()">{{to.btnText}}</button>
          </p>
        </div>

      </div>
    </div>
  </script>


  <script type="text/ng-template" id="section.html">
    <div class="panel panel-primary">

      <div class="panel-heading px-nested-panel-heading clearfix">
        <strong class="control-label" ng-if="to.label">
          {{to.label}}
          {{to.required ? '*' : ''}}
        </strong>
      </div>

      <div class="panel-body px-nested-panel-body">
        <formly-transclude></formly-transclude>
      </div>

    </div>
  </script>
</div>