Meteor-Community-Packages / meteor-autoform

AutoForm is a Meteor package that adds UI components and helpers to easily create basic forms with automatic insert and update events, and automatic reactive validation.
MIT License
1.44k stars 328 forks source link

quickForm and autoForm not displaying - no error messages. #1706

Closed forgotten8 closed 1 year ago

forgotten8 commented 3 years ago

I cannot get autoForm to show any templates. But I also received no console or server errors. I created a completely clean application to test the problem, and the issue recreated itself in the clean test meteor app. meteor create testApp -full

meteor/release METEOR@2.1

meteor/packages

meteor-base@1.4.0 
mobile-experience@1.1.0
mongo@1.10.1 
blaze-html-templates 
jquery  
reactive-var@1.0.11 
tracker@1.2.0 

standard-minifier-css@1.7.2
standard-minifier-js@2.6.0
es5-shim@4.8.0 
ecmascript@0.15.0 
typescript@4.1.2 
shell-server@0.5.0  

ostrio:flow-router-extra 
less 

meteortesting:mocha   
johanbrook:publication-collector 
aldeed:autoform@7.0.0!
aldeed:collection2@3.0.0
communitypackages:autoform-plain

package.json

{
  "name": "testApp",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "test": "meteor test --once --driver-package meteortesting:mocha"
  },
  "dependencies": {
    "@babel/runtime": "^7.11.2",
    "jquery": "^3.5.1",
    "meteor-node-stubs": "^1.0.1",
    "simpl-schema": "^1.10.2"
  },
  "devDependencies": {
    "chai": "^4.2.0"
  }
}

imports/startup/client/index.js

import './routes.js';

imports/startup/client/routes.js

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
import '../../ui/layouts/body/body.js';
import '../../ui/pages/home/home.js';

FlowRouter.route('/', {
  name: 'App.home',
  action() {
    this.render('App_body', 'App_home');
  },
});

client/main.js

import '/imports/startup/client';
import '/imports/startup/both';

imports/ui/pages/home/home.html

<template name="App_home">
  {{> hello}}
  {{> info}}
    {{#if loadComplete}}
        {{> quickForm schema=mySchema id="addName"}}
    {{/if}}
</template>

imports/ui/pages/home/home.html

import { ReactiveVar } from 'meteor/reactive-var'
import SimpleSchema from "simpl-schema";
//import 'meteor/aldeed:autoform/static'
import "meteor/aldeed:autoform/dynamic"
import { AutoFormPlainTheme } from 'meteor/communitypackages:autoform-plain/static';
import './home.html';
import '../../components/hello/hello.js';
import '../../components/info/info.js';

Template.App_home.onCreated(function(){
    let t = this;

   t.loadComplete = new ReactiveVar();

    async function init () {
        await AutoForm.load()
        await AutoFormPlainTheme.load()
        t.loadComplete.set(true)
        AutoForm.debug();
        AutoForm.setDefaultTemplate('bootstrap4')
    }

    (function () {
        init()
            .catch(e => console.error('[autoForm]: init failed - ', e))
            .then(() => console.info('[autoForm]: initialized'))
    })()

})

Template.App_home.helpers({
    mySchema:function (){
        return new SimpleSchema({
            name: {
                type: String,
                optional: false
            }
        })
    },
    loadComplete: function (){
        return Template.instance().loadComplete.get();// Set up all routes in the app
    }
})

When the home page loads I see the contents of the {{>hello}} and {{> info }} templates correctly and they are dynamically persisting data to the database.

But the form below that shows nothing. In my main application I am not just using a schema - but am using a collection with and attached schema, and I have the form type set to 'insert'. I get the same result as in the test App.

Chrome Console when the page loads

[autoForm]: initialized

I tried removing autoform and installing the autoform.5.8 with the required versions of collection2 and simpl-schema - and the quickForm worked. I also tested with simpl-schema 1.4.3

IMAGE no quickform

jankapunkt commented 3 years ago

You have to set t.loadComplete in the then() function.

forgotten8 commented 3 years ago

oops... thank you

harryadel commented 3 years ago

@jankapunkt

You have to set t.loadComplete in the then() function.

Even when using static import?

ricaragao commented 3 years ago

I'm having the same problem using static import. Any ideas ?

jankapunkt commented 3 years ago

I will take a look into this again

ricaragao commented 3 years ago

Now it is working @jankapunkt , but I think is a good idea if possible to have a way to a sync load.

jankapunkt commented 2 years ago

@ricaragao @forgotten8 is this resolved, can I close it?

ricaragao commented 2 years ago

@jankapunkt , yes. Thank you.