AutoForm

When using the schema attribute in {{#autoForm}}, you can provide the schema in two ways:

1. Using Quotation Marks: If you use schema="MySchema", AutoForm looks for an object named MySchema in the global window scope. This works if your schemas are defined at the top level of client files without the var keyword.
2. Using Helpers (Recommended): If you don't use quotation marks, you must define a Meteor helper that returns the SimpleSchema instance.

Best Practice: Add all SimpleSchema instances to a central Schemas object and register that object as a helper to keep your code organized.

// common.js
Schemas = {};
Schemas.ContactForm = new SimpleSchema({
  name: { type: String, label: "Your name" },
  // ...
});

// client.js
Template.registerHelper("Schemas", Schemas);

<template name="contactForm">
  {{#autoForm schema=Schemas.ContactForm id="contactForm" type="method" meteormethod="sendEmail"}}
  {{/autoForm}}
</template>

If your UI input format differs from your database storage format (e.g., a comma-separated string in a text field vs. an array in the database), use formToDoc and docToForm hooks.

Workflow:

1. Define the correct type in your SimpleSchema (e.g., type: [String]).
2. Use docToForm to convert the database array into a string for the input field.
3. Use formToDoc to convert the input string back into an array before it hits the database.

Note: For update forms, use formToModifier instead of formToDoc.

{{> afFieldInput name="tags" type="text"}}

AutoForm.hooks({
  postsForm: {
    docToForm: function(doc) {
      if (Array.isArray(doc.tags)) {
        doc.tags = doc.tags.join(", ");
      }
      return doc;
    },
    formToDoc: function(doc) {
      if (typeof doc.tags === "string") {
        doc.tags = doc.tags.split(",");
      }
      return doc;
    }
  }
});

AutoForm provides specialized components for fields with Object or Array types to manage nested data structures.

Object Fields

When using afQuickField for an Object type, it defaults to the afObjectField component. This component renders all subfields as a single group, typically labeled with the object field's name. In the bootstrap3 theme, this appears as a panel with a heading.

Array Fields

When using afQuickField for an Array type, it defaults to the afArrayField component. This component:

• Renders array items as a group labeled with the array field's name.
• Automatically provides UI buttons for adding and removing items.
• Supports minCount, maxCount, and initialCount attributes to control the number of items.

Constraints on counts:

• You cannot set minCount lower than the schema-defined minimum.
• You cannot set maxCount higher than the schema-defined maximum.
• minCount takes precedence over initialCount. If minCount is 1 and initialCount is 0, the initial count will be 1.

To specify options for every item within an array, use the following schema syntax:

'arrayFieldName.$': {
  ... 
  autoform: {
    afFieldInput: {
      options: function () {
        // return options object
      }
    }
  }
}

The normal form type allows you to define custom submission logic using AutoForm.hooks.

When an onSubmit hook is triggered, it receives three arguments:

1. insertDoc: The cleaned and validated form values (suitable for insert()). Note: auto/default values are not yet added.
2. updateDoc: The form input values as a modifier (not validated).
3. currentDoc: The object currently bound to the form via the doc attribute.

Important Requirements:

• You must call this.done() when your custom logic is finished.
• If you perform asynchronous tasks, call this.done(error) to trigger onError hooks, or this.done(null, result) to trigger onSuccess hooks.
• If you return false, the default browser submission is prevented.
• To add auto/default values to insertDoc or updateDoc manually on the client, use Schema.clean(doc).

AutoForm.hooks({
  contactForm: {
    onSubmit: function (insertDoc, updateDoc, currentDoc) {
      if (customHandler(insertDoc)) {
        this.done();
      } else {
        this.done(new Error("Submission failed"));
      }
      return false;
    }
  }
});