formly-js / angular-formly

JavaScript powered forms for AngularJS
http://docs.angular-formly.com
MIT License
2.22k stars 405 forks source link

Form Fields are not displaying inside the Modal #732

Open ankur-joshi opened 7 years ago

ankur-joshi commented 7 years ago

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/formly-js/angular-formly/issues/201]