Search code examples
javascriptmeteormeteor-autoform

How to match custom template to schema in Meteor AutoForm?


In this minimal example I have two schemas, one for a Person and another called Groups that defines a collection. Using AutoForm, I want to apply a custom template to any occurrence of PersonSchema, regardless of the parent schema.

SimpleSchema.PersonSchema = new SimpleSchema({
  firstName: {
    type: String,
    optional: false,
    label: "First Name"
  },
  lastName: {
    type: String,
    optional: false,
    label: "Last Name"
  }
});

Groups = new Mongo.Collection('groups');

Groups.attachSchema(new SimpleSchema({
    name: {
        type: String,
        optional: false,
        label: "Group Name"
    },
    people: {
        type: [SimpleSchema.PersonSchema],
        minCount: 1
    }
}));

I understand that I can attach a template to the AutoForm via the template attribute as well as some additional classes like so:

{{> quickForm id="addGroupForm" collection="Groups" type="insert" template="bootstrap3-horizontal" label-class="col-sm-3" input-col-class="col-sm-9"}}

How can I create a template for just the Person section of the form?


Solution

  • According to the Meteor AutoForm documentation, bootstrap3-horizontal can be used with afFormGroup, afQuickField or quickForm only. So, if you want to use template="bootstrap3-horizontal" just for the PersonSchema section in your form, you will need to set the template attribute for the appropriate afQuickField.

    For example:

    {{#autoForm id="addGroupForm" collection="Groups" type="insert"}}
        <fieldset>
            <legend>Add a Group</legend>
            {{> afQuickField name='name'}}
            {{> afQuickField name='people' template="bootstrap3-horizontal" label-class="col-sm-3" input-col-class="col-sm-9"}}
        </fieldset>
        <button type="submit" class="btn btn-primary">Insert</button>
    {{/autoForm}}