Autoform's select populated with another collection

help
1

Hi everyone !

I’m trying to populate an autoform select with another collection.
Annnnnnnd i’m not successful at the moment.

Here is my code :

<template name="insertFormModelesTemplate">
        {{#autoForm collection="Modeles" id="insertModelesForm" type="insert"}}
            <fieldset>
              <legend>Ajouter un modèle</legend>
              {{> afQuickField name='nom'}}
              {{> afQuickField name='marqueId' options='marqueOptions'}}
            </fieldset>
            <button type="submit" class="btn btn-primary">Ajouter</button>
        {{/autoForm}}
</template>

Template.registerHelper("marqueOptions", function() {
    return Marques.find().map(function (marque) {
      return {label: marque.name, value: marque._id};
    });
  });

import SimpleSchema from 'simpl-schema';
SimpleSchema.extendOptions(['autoform']);

Modeles = new Mongo.Collection('modeles'); 

Modeles.attachSchema(new SimpleSchema({
    nom: {
      type: String,
      label: "Nom"
    }, 
    marqueId: {
        type: String,
        label: "Marque",
        autoform: {
            type: "select"
        }
    }
  }, { tracker: Tracker }));

Here is the errors I’m getting in the dev console when the app run :

Exception in template helper: TypeError: Cannot read property 'toString' of undefined
    at http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:5486:26
    at Function._.each._.forEach (http://localhost:3000/packages/underscore.js?hash=884c0f04552531e604be5ca6d94381bbf1550f5c:152:22)
    at Object.contextAdjust (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:5446:7)
    at Object.afFieldInputContext (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:7006:78)
    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)

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.attsPlusFormControlClass (http://localhost:3000/packages/aldeed_autoform.js?hash=954bc02e0fca04fa83ea45bb5b4206380192fdad:7950:29)
    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)

Does someone see my mistake(s) ?

2

I have run into issues similar to this (don’t know if related), but I believe the client can not resolve the collection Modeles. Also make sure you define the schema on the client and the server.

Have you tried changing it to

<template name="insertFormModelesTemplate">
        {{#autoForm collection=collection id="insertModelesForm" type="insert"}}
            <fieldset>
              <legend>Ajouter un modèle</legend>
              {{> afQuickField name='nom'}}
              {{> afQuickField name='marqueId' options='marqueOptions'}}
            </fieldset>
            <button type="submit" class="btn btn-primary">Ajouter</button>
        {{/autoForm}}
</template>

and create a helper

Modeles = new Mongo.Collection('modeles'); 

insertFormModelesTemplate.helpers({
 collection(){
  return Modeles;
 }
});
3

Thx for response :slight_smile:

So I tried your solution but still get an error.

Error: collection is not in the window scope

Although I have an helper linked to this template with the definition of the collection function in it (the same way you did).

I don’t quite understand where to put this line

Modeles = new Mongo.Collection(‘modeles’);

I already made the collection in a folder named collections at the root of the project. Should I move just this line in the helper and remove it from the previous file ?

4

As you are using import statements, you will probably find it cleaner to import your collection wherever you need it. To do that, create a folder imports/both/ and put the collection definition in a file in there:

// imports/both/Modeles.js
import { Mongo } from 'meteor/mongo';

export const Modeles = new Mongo.Collection('modeles');

Then, wherever you need to use it (client or server), just import { Modeles } from '/imports/both/Modeles';

Note that even if you don’t use it on the server, you should import it in your server’s main.js, just to make sure it’s on the server.

This error indicates that, as @jamgold suggests, the collection is not available to the client at the place you are trying to use it. Using import (and an editor with ESLint) will let you find and fix those places quickly.

5

That helper can’t get the marque collection maybe because you don’t put them in the same scope. And you also need to subscribe the collection to make sure that the client side can iterate over the returning array.
As an example:

In both.js
Modeles = new Mongo.Collection ‘modeles’
Marquees = new Mongo.Collection ‘marquees’
Just to make sure that if you can access Modeles coll, you can access Marquees too.

In client.js
Meteor.subscribe ‘marquees’, onReady: -> return Marquees.map # to array of objects that contain value and label props

I’m sorry if I prefered live script here. Hope it helps