Meteor autoform wizard templates not shown


#1

I am trying to create a meteor wizard autoform from this package AutoForm Wizard i succeeded to make it work once but after a while i got those exceptions :

Exception in template helper: TypeError: Cannot read property ‘getDefinition’ of undefined
at Object.getFieldDefinition (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:293:18)
at Object.autoFormGetComponentContext [as getComponentContext] (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:558:22)
at Object.afQuickFieldIsGroup (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:7254:32)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3051:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:1715:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3103:66
at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3744:12)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3102:27
at Object.Spacebars.call (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:172:18)
at http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:7208:22

Exception in template helper: TypeError: Cannot read property ‘label’ of undefined
at Object.autoFormGetLabelForField [as getLabelForField] (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:2945:36)
at Object.autoFormFieldLabelText (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:1436:21)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3051:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:1715:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3103:66
at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3744:12)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3102:27
at Spacebars.call (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:172:18)
at Spacebars.mustacheImpl (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:106:25)
at Object.Spacebars.mustache (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:110:39)

Exception in template helper: TypeError: Cannot read property ‘namedContext’ of undefined
at Object.autoFormFieldIsInvalid (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:1322:23)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3051:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:1715:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3103:66
at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3744:12)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3102:27
at Spacebars.call (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:172:18)
at Spacebars.mustacheImpl (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:106:25)
at Object.Spacebars.dataMustache (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:138:39)
at http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:8223:26

Exception in template helper: TypeError: Cannot read property ‘class’ of undefined
at Object.addClass (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:624:22)
at Object.bsFieldLabelAtts (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:8291:31)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3051:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:1715:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3103:66
at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3744:12)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3102:27
at Spacebars.call (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:172:18)
at Spacebars.mustacheImpl (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:106:25)
at Object.Spacebars.attrMustache (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:122:39)

Exception in template helper: TypeError: Cannot read property ‘namedContext’ of undefined
at Object.autoFormFieldMessage (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:1309:23)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3051:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:1715:16
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3103:66
at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3744:12)
at http://localhost:3000/packages/blaze.js?hash=a1ff2d6d5ecd59ee11e2ba260b8650a9d1140f59:3102:27
at Spacebars.call (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:172:18)
at Spacebars.mustacheImpl (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:106:25)
at Object.Spacebars.mustache (http://localhost:3000/packages/spacebars.js?hash=547cf8e466d1d52603d19bd5f48fb5df184fd237:110:39)
at Blaze.View._render (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:8260:40)

this is what i am trying to do : I have 3 form steps to fill; contracts , company informations and manager information


well this is my code: /contracts.js

import {Template} from "meteor/templating";
import SimpleSchema from 'simpl-schema';
import {Meteor} from "meteor/meteor";
SimpleSchema.extendOptions(['autoform']);

Contracts = new Mongo.Collection('contracts');
Companys = new Mongo.Collection('companys');

Schemas = {};

Schemas.company = new SimpleSchema({

    name:{
        type: String,
        label: 'Name'
    },
    address: {
        type: String,
        label: 'Address'
    },
    phone: {
        type: String,
        label: 'Phone'
    },
    email: {
        type: String,
        label: 'Email'
    }

});
PackagesTypes = [
    {
        label: "freemium",
        value: "freemium"
    },
    {
        label: "bronze",
        value: "bronze"
    },
    {
        label: "silver",
        value: "silver"
    },
    {
        label: "gold",
        value: "gold"
    },
    {
        label: "platium",
        value: "platium"
    }
];
Schemas.contract = new SimpleSchema({
    name: {
        type: String,
        label: 'Name',
    },
    package: {
        type: String,
        label: 'Package type',
        autoform: {
            options: PackagesTypes
        }
    }



});


Schemas.manager = new SimpleSchema({

    email: {
        type: String,
        label: 'Email'
    },
    password: {
        type: String,
        label: 'Password'
    },
    firstName:{
        type: String,
        label: 'First Name'
    },
    lastName: {
        type: String,
        label: 'Last Name'
    }


});
Contracts.attachSchema(Schemas.contract);
Companys.attachSchema(Schemas.company);

Template.contractsWizard.onCreated(function contractsWizardOnCreated() {
});
Template.viewOrder.onCreated(function viewOrderOnCreated() {
});
Template.contractsWizard.helpers({

    steps: function() {
        return [
            {
                id: 'contracts',
                title: 'Contracts',
                template: 'contractTemplate',
                formId: 'contractTemplate',
                schema: Schemas.contract,
                onSubmit: function(data, wizard) {


                    Meteor.call('insertContract', data, function (er,id) {
                        console.log('id from client');
                        console.log(id);
                        var contractId = id;
                        Session.set('currentRecordId',contractId);
                        if (er) {
                            toastr.error("insert problem");
                            console.log(data);
                            console.log(er);

                        } else {
                            // console.log(data);
                            toastr.success("Contract added successfully", "success");
                            wizard.next([data]);


                        }

                    })


                }

            },

            {
                id: 'company',
                title: 'Company information',
                template: 'companyTemplate',
                formId: 'companyTemplate',
                schema: Schemas.company,
                onSubmit: function(data, wizard) {
                    const contractId =Session.get('currentRecordId');

                    data.contractId = contractId;
                    Meteor.call('insertCompany', data, function (er,id) {
                        if (er) {
                            toastr.error("insert problem");
                            console.log(er);

                        } else {
                            toastr.success("company added successfully", "success");

                            wizard.next([data]);
                        }

                    });

                }
            },

            {
                id: 'managers',
                title: 'Manager',
                template: 'managerTemplate',
                formId: 'managerTemplate',
                schema: Schemas.manager,
                onSubmit: function(data, wizard) {
                    const contractId =Session.get('currentRecordId');
                    data.contractId = contractId;
                    var accountInfo = {
                        email: data.email,
                        password: data.password,
                        profile : {
                            firstName: data.firstName,
                            lastName: data.lastName,
                            contractId: data.contractId


                        }
                    };
                    console.log(accountInfo);

                    //console.log(wizard.mergedData(),data);

                    Meteor.call('addUser', accountInfo,'manager', function (er) {
                        if (er) {
                            toastr.error( "There was an error making your account","4000");
                            console.log(er);

                        } else {
                            toastr.success( "user added successfully","success");
                            FlowRouter.go('/admin/dashboard');


                        }
                    });


                }

            }
        ];
    }
});


Template.viewOrder.events({
    'click #place'(event) {
        event.preventDefault();
        FlowRouter.go('/conversation');
    }
});

Wizard.useRouter('kadira:flow-router');

and this is /contracts.html

<template name="contractsWizard">
    {{> wizard id="contractsWizard" route="basic" steps=steps stepsTemplate="steps_bootstrap3" buttonClasses="btn"}}
</template>

<template name="contractTemplate">
    {{#autoForm id="contractTemplate" schema=step.schema}}
        {{> afQuickField name="name" }}
        {{> afQuickField name="package" }}

        {{> wizardButtons}}

    {{/autoForm}}
</template>
<template name="companyTemplate">
    {{#autoForm id="companyTemplate" schema=step.schema}}
        {{> afQuickField name="name"}}
        {{> afQuickField name="address"}}
        {{> afQuickField name="phone"}}
        {{> afQuickField name="email"}}

        {{> wizardButtons}}

    {{/autoForm}}
</template>

<template name="managerTemplate">
    {{#autoForm id="managerTemplate" schema=step.schema}}
        {{> afQuickField name="email"}}
        {{> afQuickField name="password"}}
        {{> afQuickField name="firstName"}}
        {{> afQuickField name="lastName"}}

        {{> wizardButtons}}

    {{/autoForm}}
</template>

<template name="viewOrder">
    <p>Thanks for your order {{name}}.</p>

    <a id="place" class="btn">Place another order</a>
</template>

and this is /wizard-boostrap3-ui.html

<template name="steps_bootstrap3">
    <ul class="nav nav-wizard">
        {{#each wizard.steps}}
            <li class="{{stepClass id}}">
                {{#if wizard.route}}
                    <a href="{{pathForStep id}}">{{title}}</a>
                {{else}}
                    <span>{{title}}</span>
                {{/if}}
            </li>
        {{/each}}
    </ul>
</template>

and /wizard-boostrap3-ui.js

Template.steps_bootstrap3.helpers({
    stepClass: function(id) {
        var activeStep = this.wizard.activeStep();
        var step  = this.wizard.getStep(id);
        if (activeStep && activeStep.id === id) {
            return 'active';
        }
        if (step.data()) {
            return 'completed';
        }
        return 'disabled';
    }
});

and /layout.html

<template name="layout">
    <header class="app-header navbar">
        <div id="navbarbran" class="navbar-brand"  ></div>

        <ul class="nav navbar-nav d-md-down-none">


            <li class="nav-item px-3">
                <div class="dropdownb">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Contracts & Features</button>
                    <div class="dropdownb-content">
                        <a href="#">Contracts</a>
                        <a href="#">Features</a>
                    </div>
                </div>
            </li>



        </ul>
        <ul class="nav navbar-nav ml-auto">

        </ul>
    </header>
    <div class="main container">
        <h1>Add Contracts</h1>

        <nav class="navbar navbar-inverse purple">
            <div class="container-fluid">
                <ul class="nav navbar-nav">
                    <li><a href="{{pathFor route='basic'}}">Contracts</a></li>

                </ul>
            </div>
        </nav>

        {{> Template.dynamic template=area}}
    </div>
</template>

and finally /routes.js

FlowRouter.route('/basic/:step?', {
    name: 'basic',
    action: function(params, queryParams) {
        if (!params.step) {
            FlowRouter.go('basic', {step: 'company-information'})
        } else {
            BlazeLayout.render('layout', {area: 'contractsWizard'})
        }
    },
});

FlowRouter.route('/orders/:_id', {
    action: function(params) {
        BlazeLayout.render('layout', {area: 'viewOrder'})
    }
});