Multiple document in the same form with Meteor AutoForm

Question

I have a few forms that allow the user to add multiple documents to a collection at the same time which I want to convert to use AutoForm but I can't work how best to do it.

For example, the user can create a class in a school. A class can have a name, subject and teacher. Instead of a form to add just one class at a time I have rows which allow adding many classes at the same time. Here's a simple example how it looks before I add AutoForm. This gives me three rows with a name, subject and teacher column in each row.

<form class="class-form">
    <div class="table-row">
        <input type="text" name="name[]" placeholder="name">
        <input type="text" name="subject[]" placeholder="subject">
        <input type="text" name="teacher[]" placeholder="teacher">
    </div>
    <div class="table-row">
        <input type="text" name="name[]" placeholder="name">
        <input type="text" name="subject[]" placeholder="subject">
        <input type="text" name="teacher[]" placeholder="teacher">
    </div>
    <div class="table-row">
        <input type="text" name="name[]" placeholder="name">
        <input type="text" name="subject[]" placeholder="subject">
        <input type="text" name="teacher[]" placeholder="teacher">
    </div>

    <button type="submit">Save</button>
</form>

I can create a schema for a class and use AutoForm to create a form for one class at a time, but how can I use AutoForm to create multiple documents in one form as above?

[The example code has been simplified a lot here. It uses Select2 elements to choose subject and teacher and there are more fields and s in the actual code. Also, as the rows fill up I automatically add more rows. I'm keeping this example simple and will tackle those problems later]

Answer 1

I'm not sure if it's possible to insert multiple documents on one form, however you can add arrays of sub documents in one form such as:

ClassesCollection = new Mongo.Collection("classes");


ClassSchema = new SimpleSchema({
    name: {
        type: String
    },
    subject: {
        type: String
    },
    teacher: {
        type: String
    }
});


ClassesSchema = new SimpleSchema({
    classes: {
        type: [ClassSchema]
    }
});

ClassesCollection.attachSchema(ClassSchema);

That will generate a form for you where you can add multiple classes at once, however they will all be stored in one document under a "classes" array. This might be an unwelcome change to your architecture. So you could either extend autoForm to have that functionality or stick with your custom solution.