Angularjs form not displaying on the front end

Question

I am a newbie when it comes to Angular and I am trying to get my form to display. Form was generated with http://mackentoch.github.io/easyFormGenerator/

Link to page: http://wingfield.vmgdemo.co.za/#/request_car

Any help would be greatly appreciated!

Index.html

    <!DOCTYPE html>
    <!--[if lt IE 7]>
    <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>
    <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>
    <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="no-js" ng-app="wingField">
    <!--<![endif]-->
    <head>

    <!-- Meta-Information -->
    <title>Wingfield Motors</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="Welcome to Wingfield mobile! Call Us                         Email Us Find Us View Showroom Sell Your Vehicle Apply For Finance Technical Center Complaint Resolution Buyers Tips">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap Stylesheets -->
    <link rel="stylesheet"         href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.4.1/dist/textAngular.css">
    <link href="https://rawgit.com/lordfriend/nya-bootstrap-select/master/dist/css/nya-bs-select.min.css" rel="stylesheet">
    <!-- CSS Styles -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/mobile.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/owl.theme.css">
    <link rel="stylesheet" href="css/owl.transitions.css">
    <link href="css/vendor.css" rel="stylesheet">
    </head>
    <body>
    <!--[if lt IE 7]>
    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
    <![endif]--> 

    <!-- Website Content-->
    <div class="fixed_dream"><a href="#/request_car">Dream Vehicle Request</a></div>
    <div ng-include='"templates/header.html"' id="#top"></div>
    <div ng-view></div>
    <div ng-include='"templates/footer.html"'></div>

My HTML

<div class="container">
    <div class="col-md-9" ng-controller="MainCtrl as vm">
      <h2>Thank you for your request! One of our sales executives will contact you soonest.</h2>

            <!-- here is the simple HTML you need (everything else is decoration) : -->
            <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 pull-right" ng-disabled="vm.form.$invalid">{{vm.buttons.submit}}</button>
                <button type="button" class="btn btn-primary pull-right" ng-click="vm.options.resetModel()">{{vm.buttons.cancel}}</button>
              </formly-form>
            </form>

    </div>

My JS:

 var app = angular.module('wingField', [  
                                              'textAngular',  
                                              'formly',  
                                              'formlyBootstrap', 
                                              'ui.bootstrap', 
                                              'nya.bootstrap.select', 
                                              function () { 
      }]); 
      ////////////////////////////// 
      // CONFIG HERE               
      ///////////////////////////// 
      app.config([  'formlyConfigProvider',  
                        function(formlyConfigProvider) { 
          formlyConfigProvider.setType( 
            { 
              name: 'richEditor', 
              template: '<text-angular class="richTextAngular" ng-model="model[options.key || index]"></text-angular>' 
            } 
          ); 
          formlyConfigProvider.setType( 
            { 
              name: 'blank', 
              template: '<div></div>' 
            } 
          ); 
          var subTitleTemplate = '<div class="row"><div class=""><h4 class="text-center">{{options.templateOptions.placeholder}}<h4><hr/></div></div>'; 
          formlyConfigProvider.setType( 
            { 
              name: 'subTitle', 
              template: subTitleTemplate 
            } 
          ); 
        var basicSelectTemplate =   ' <ol   class="nya-bs-select col-sm-12 col-xs-12 col-md-12 col-lg12" ' +  
                                    '   ng-model="model[options.key || index]"  ' +  
                                    '   id="{{id}}"  ' +  
                                    '   disabled="options.templateOptions.options.length === 0"> ' +  
                                    '   <li class="nya-bs-option" nya-bs-option="option in options.templateOptions.options"> ' +  
                                    '     <a>{{option.name}}</a> ' +  
                                    '   </li> ' +  
                                    ' </ol>     ' ; 
         formlyConfigProvider.setType( 
            { 
              name: 'basicSelect', 
              template: basicSelectTemplate 
            } 
          ); 
          var groupedSelectTemplate =   '  <ol class="nya-bs-select col-sm-12 col-xs-12 col-md-12 col-lg12" ' + 
                                        '    ng-model="model[options.key || index]" ' + 
                                        '       data-live-search="true" ' + 
                                        '       disabled="options.templateOptions.options.length === 0">' + 
                                        '       <li nya-bs-option="option in  options.templateOptions.options group by option.group"  ' + 
                                        '       >' + 
                                        '         <span class="dropdown-header">{{$group}}</span>' +  
                                        '         <a>' + 
                                        '           <span>{{option.name}}</span>' + 
                                        '           <span class="glyphicon glyphicon-ok check-mark"></span>' + 
                                        '         </a>' + 
                                        '       </li>' + 
                                        '     </ol>'; 
         formlyConfigProvider.setType( 
            { 
              name: 'groupedSelect', 
              template: groupedSelectTemplate 
            } 
          ); 
         // angular UI date picker 
         // thx Kent C. Dodds 
        var attributes = [ 
          'date-disabled', 
          'custom-class', 
          'show-weeks', 
          'starting-day', 
          'init-date', 
          'min-mode', 
          'max-mode', 
          'format-day', 
          'format-month', 
          'format-year', 
          'format-day-header', 
          'format-day-title', 
          'format-month-title', 
          'year-range', 
          'shortcut-propagation', 
          'datepicker-popup', 

          'show-button-bar', 
          'current-text', 
          'clear-text', 
          'close-text', 
          'close-on-date-selection', 
          'datepicker-append-to-body' 
        ]; 
        var bindings = [ 
          'datepicker-mode', 
          'min-date', 
          'max-date' 
        ]; 
        var ngModelAttrs = {}; 
        angular.forEach(attributes, function(attr) { 
          ngModelAttrs[camelize(attr)] = {attribute: attr}; 
        }); 
        angular.forEach(bindings, function(binding) { 
          ngModelAttrs[camelize(binding)] = {bound: binding}; 
        }); 
        formlyConfigProvider.setType({ 
          name: 'datepicker', 
          template: '<input  id="{{id}}" class="form-control" ng-click="open($event)" ng-model="model[options.key  || index]" is-open="to.isOpen" ng-click="to.isOpen = true" datepicker-options="to.datepickerOptions" />', 
          wrapper: ['bootstrapLabel', 'bootstrapHasError'], 
          controller: ['$scope', function($scope) { 
             $scope.open = function($event) { 
              $event.preventDefault(); 
              $event.stopPropagation(); 
              $scope.opened = true; 
            }; 
           }], 
          defaultOptions: { 
            ngModelAttrs: ngModelAttrs, 
            templateOptions: { 
              addonLeft: { 
                class: 'glyphicon glyphicon-calendar', 
                onClick: function(options, scope) { 
                  options.templateOptions.isOpen = !options.templateOptions.isOpen; 
                } 
              },        
              onFocus: function($viewValue, $modelValue, scope) { 
                scope.to.isOpen = !scope.to.isOpen; 
              }, 
              datepickerOptions: {} 
            } 
          } 
        }); 
        function camelize(string) { 
          string = string.replace(/[-_s]+(.)?/g, function(match, chr) { 
            return chr ? chr.toUpperCase() : ''; 
          }); 
          // Ensure 1st char is always lowercase 
          return string.replace(/^([A-Z])/, function(match, chr) { 
            return chr ? chr.toLowerCase() : ''; 
          }); 
        }  
       }]);    
      ////////////////////////////////////////// 
      // demo controller 
      ////////////////////////////////////////// 
      app.controller('MainCtrl', ['$scope',      
                                      function ($scope, formlyVersion) { 
         console.info('controller loaded'); 
         // submit function assignment 
          $scope.vm.onSubmit = onSubmit; 
          ///////////////////////// 
          // variable assignment 
          ///////////////////////// 
          //data model here : 
          $scope.vm.model = {}; 
          //this model is the initial one 
          $scope.vm.initialFieldsModel =[{"className":"col-xs-12","type":"subTitle","key":"subTitle-1478167186944","templateOptions":{"type":"","label":"","required":false,"placeholder":"Personal Details","description":"","options":[]}},{"className":"col-xs-12","type":"input","key":"input-1478168199256","templateOptions":{"type":"","label":"Your Name","required":true,"placeholder":"","description":"","options":[]}},{"className":"col-xs-12","type":"subTitle","key":"subTitle-1478168225365","templateOptions":{"type":"","label":"","required":false,"placeholder":"Preferred Contact Method","description":"","options":[]}},{"className":"col-xs-12","type":"input","key":"input-1478168258846","templateOptions":{"type":"","label":"Email","required":false,"placeholder":"","description":"","options":[]}},{"className":"col-xs-12","type":"input","key":"input-1478168274554","templateOptions":{"type":"","label":"Phone","required":false,"placeholder":"","description":"","options":[]}},{"className":"col-xs-12","type":"subTitle","key":"subTitle-1478168288381","templateOptions":{"type":"","label":"","required":false,"placeholder":"Vehicle Description","description":"","options":[]}},{"className":"col-xs-12","type":"input","key":"input-1478168345792","templateOptions":{"type":"","label":"Make","required":true,"placeholder":"","description":"","options":[]}},{"className":"col-xs-12","type":"input","key":"input-1478168362231","templateOptions":{"type":"","label":"Model","required":true,"placeholder":"","description":"","options":[]}},{"className":"col-xs-12","type":"input","key":"input-1478168380695","templateOptions":{"type":"","label":"Price Range","required":true,"placeholder":"","description":"","options":[]}},{"className":"col-xs-12","type":"radio","key":"radio-1478168437924","templateOptions":{"type":"","label":"Do you have a Trade In?","required":false,"placeholder":"","description":"","options":[{"name":"Yes","value":0,"group":""},{"name":"No","value":1,"group":""}]}},{"className":"col-xs-12","type":"subTitle","key":"subTitle-1478168449472","templateOptions":{"type":"","label":"","required":false,"placeholder":"Additional Information","description":"","options":[]}},{"className":"col-xs-12","type":"textarea","key":"textarea-1478168467467","templateOptions":{"type":"","label":"Message","required":false,"placeholder":"","description":"","options":[]}}];
          $scope.vm.buttons = { 
                                "submit" : "submit", 
                                "cancel" : "cancel" 
          }; 
          ////////////////////////////////////////////////////// 
          //this model "vm.fields" will be bound to formly  
          //-> initialisation from $scope.vm.initialFieldsModel   
          ////////////////////////////////////////////////////// 
          $scope.vm.fields = angular.copy($scope.vm.initialFieldsModel); 
          // onSubmit function definition : 
          function onSubmit() { 
            //an alert of the data model 
            alert(JSON.stringify($scope.vm.model), null, 2); 
          } 
      }]);

Gautam Baindur · Accepted Answer · 2016-11-03 13:17:03Z

1

I have created a plnkr for this with a stripped down version of the code you mentioned above. Some problems that I saw with your code are as follows:

ng-app was not defined in your html. This acts like an entry point for angular.
when you are using a controller as syntax like you have done, you do not need to inject $scope. You can access the model variables using "this". Here is a good beginner article for the same.

---click here for the plnkr

edited Nov 3, 2016 at 13:17

answered Nov 3, 2016 at 13:11

Gautam Baindur

362 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

waynev Over a year ago

Thank you..@Gautam Baindur my bad i forgot to add y index code, I ahve added to my original question

Gautam Baindur Over a year ago

If my answer helped you, please could you mark it as an answer?

Collectives™ on Stack Overflow

Angularjs form not displaying on the front end

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related