formly-js/angular-formly

Form Fields are not displaying inside the Modal

Opened this issue · 0 comments

I have a simple form which i am trying to open inside a modal (angular-modal).
None of form fields are getting displayed. Also there is no error in my console either.
Can anybody kindly advice as to where i am going wrong.

My HTML file,

<form novalidate>
    <formly-form model="vm.templateTab" fields="vm.templateTabFields" form="vm.templateTabForm"></formly-form>
  </form>

My CONTROLLER file,


(function() {
  'use strict';

  angular
    .module('myApp')
    .controller('AddTemplateController', ['$scope', 'Service', function( $scope, Service ) {
      var vm = this;
      vm.templateTab = {};

      vm.templateTabFields = [
        {
          key: 'report_type',
          type: 'select',
          templateOptions: {
            label: 'Report Type',
            options: Service.getReportType(),
            required: true
          }
        },
        {
          key: 'report_title',
          type: 'input',
          templateOptions: {
            label: 'Report Template Name 
            required: true
          }
        },
        {
          key: 'report_category',
          type: 'select',
          templateOptions: {
            label: 'Report Category',
            placeholder: 'Select Report Category',
            options: Service.getReportCategory(),
            required: true
          }
        },
        {
          key: 'report_description',
          type: 'textarea',
          templateOptions: {
            label: 'Report Description',
            required: true
          }
        },

      ]


    }]);
})();

My Dependencies,

<script type="text/javascript" src="lib/api-check/dist/api-check.js"></script>
      <script type="text/javascript" src="lib/angular/angular.min.js"></script>
      <script type="text/javascript" src="lib/angular-formly/dist/formly.js"></script>
      <script type="text/javascript" src="lib/angular-formly-templates-bootstrap/dist/angular-formly-templates-bootstrap.js"></script>

This is how my DOM is loading without any error on console.

<form novalidate="" class="ng-pristine ng-valid">
    <ng-form class="formly ng-isolate-scope ng-pristine ng-valid" name="formly_1" role="form" model="vm.templateTab" fields="vm.templateTabFields" form="vm.templateTabForm">
          <!-- ngRepeat: field in fields -->
          <div ng-transclude="" class=""></div>
        </ng-form>
  </form>

ALSO, have defined controllerAs: vm in my route file. But still no luck.
[https://github.com//issues/201]