CODEWITHSUNDEEP
javascriptmeteormeteor-autoformmeteor-collection2simple-schema
Moritz Schmitz v. Hülst
Moritz Schmitz v. Hülst

Reputation: 3682

How to populate autoForm select with values from collection in Meteor?

I just found this awesome autoForm package for Meteor and I want to use it together with select2.

My goal is to use the autoForm to easily create an input form for one of my collections. The obstacle is: how do I populate it with fields from another collection and how do I make it multi-select?

Inside my lib/collections I declare a Meteor collection:

Clients = new Mongo.Collection('clients');
Clients.attachSchema(new SimpleSchema({
    clientName: {
        type: String,
        label: "Mandator Name",
        max: 200
    }
}));

Now I don't get the documentation on autoForm. On the atmospherejs page (https://atmospherejs.com/aldeed/autoform) I am supposed to use something like this if I am not wrong:

{{#autoForm collection="Clients" id="insertClientForm" type="insert"}}
    {{> afFieldInput name="clientName" options=options}}
{{/autoForm}}

And then write some JS like this:

Template.registerHelper({
    options: function() {
        return Clients.find({}, {fields: {clientName: 1}});
    }
});

The template is rendered alright, as in I can see an input box. However it is not a multi-select and it does not allow me to select any values at all.

Any ideas on where the issue is?

Bonus question: How do I use select2 on autoForm generated select inputs? EDIT: Use aldeed:autoform-select2 to use select2.

Upvotes: 3

Views: 2754

Answers (2)

Andy59469
Andy59469

Reputation: 2064

I have tested this solution with Meteor using

aldeed:collection2 aldeed:autoform natestrauser:select2 aldeed:autoform-select2

Lets say you have a form with profile info about the user, and one of the fields is 'occupation' (as in their job etc), and you want them to select an occupation from the list.

1) Publish the collection you want to use for the Select options.

ON THE SERVER

Meteor.publish('occupations', function () {
  return Occupations.find();
});

2) Subscribe to the collection on the Client

ON THE CLIENT

Meteor.subscribe('occupations');

3) Create a helper for the template of your form 

Template.CreateUser.helpers({
  listOccupations: function () {
    return Occupations.find({}).fetch();
  },
});

4) Then finally reference that helper in the options parameter of the autoForm field - in this casei used a afQuickField

{{> afQuickField name='occupations' multiple=true tags=true options=listOccupations}}

5) And make sure your schema is set up correctly to use Select2

occupations: {
    type: [String],
    optional:true,
    label: 'Occupation',
    autoform:{
      type:"select2",
      placeholder: 'Comma spaced list of occupations',
    }
  },

Upvotes: 2

challett
challett

Reputation: 906

You need to map your collection to a label and a value; label is what the client will see, value is what will be saved on submit.

https://github.com/aldeed/meteor-autoform#use-a-helper

Template.registerHelper({
    options: function() {
        return Clients.find({}, {fields: {clientName: 1}}).map(function (c){
      return {label: c.clientName, value: c._id};;
    }
});

If you want multi-select, you need to make your schema key type [String] instead of String

Upvotes: 1

Related Questions