Latest commit 3861cb8 Jan 19, 2017 @SachaG SachaG Fix component export

Nova Forms

This package provides a SmartForm component that works with the schema extension defined in the smart-methods package to let you easily generate new document and edit document forms.


meteor add nova:forms

(note: package is not published yet)


This package can generate new document and edit document forms from a SimpleSchema schema. Features include:

  • Error handling.
  • Bootstrap-compatible.
  • Cross-component communciation (prefill a field based on another).
  • Callbacks on form submission, success, and failure.
  • Support for basic form controls (input, textarea, radio, etc.).
  • Support for custom form controls.
  • Submission to Meteor methods.

NPM Dependencies

react react-intl formsy-react react-bootstrap formsy-react-components

You also need to load Bootstrap's CSS separately.


Example schema:

import BodyFormControl from './components/BodyFormControl.jsx';

const isLoggedIn = (user) => !!user;
const isOwner = (user, document) => user._id === document.userId;
const isAdmin = (user) => user.isAdmin;

const PostsSchema = new SimpleSchema({
  postedAt: {
    type: Date,
    optional: true
    // no insertableBy or editableBy means this field won't appear in forms
  title: {
    type: String,
    optional: false,
    max: 500,
    insertableBy: isLoggedIn,
    editableBy: isOwner,
    control: "text",
    order: 1
  body: {
    type: String,
    optional: true,
    max: 3000,
    insertableBy: isLoggedIn,
    editableBy: isOwner,
    control: BodyFormControl,
    order: 2
  sticky: {
    type: Boolean,
    optional: true,
    defaultValue: false,
    insertableBy: isAdmin,
    editableBy: isAdmin,
    control: "checkbox",
    order: 3

New document form:


Edit document form:




The collection in which to edit or insert a document.


If you prefer, you can also specify a schema instead of a collection.


If present, the document to edit. If not present, the form will be a “new document” form.


The current user.


A callback called on form submission on the form data. Should return the data object as well.


A callback called on method success.

errorCallback(document, error)

A callback called on method failure.


If provided, will show a "cancel" link next to the form's submit button.


The name of the Meteor method to call.


A function to call on field names to get the label.


A set of props to prefill for new documents.

Collection Schema

This package generates forms based on the following special schema properties (see also the Smart Methods package:


A function called on the user performing the operation, should return true or false. When generating a form for inserting new documents, the form will contain all the fields that return true for the current user.

editableBy(user, document)

Called on the user performing the operation, and the document being operated on, and should return true or false. When generating a form for editing existing documents, the form will contain all the fields that return true for the current user.


Either a text string (one of text, textarea, checkbox, checkboxgroup, radiogroup, or select) or a React component.


A number corresponding to the position of the property's field inside the form.


An optional object containing the group/section/fieldset in which to include the form element. Groups have name, label, and order properties.

For example:

postedAt: {
  type: Date,
  optional: true,
  insertableBy: Users.isAdmin,
  editableBy: Users.isAdmin,
  publish: true,
  control: "datetime",
  group: {
    name: "admin",
    label: "Admin Options",
    order: 2

Note that fields with no groups are always rendered first in the form.


A placeholder value for the form field.


A React component that will be inserted just before the form component itself.


A React component that will be inserted just after the form component itself.


The main SmartForm components makes the following objects available as context to all its children:


An object containing optional autofilled properties.

addToAutofilledValues({name: value})

A function that takes a property, and adds it to the autofilledValues object.

throwError({content, type})

A callback function that can be used to throw an error.


A function that lets you retrieve the current document from a form component.

Handling Values

The component handles three different layers of input values:

  • The value stored in the database (when editing a document).
  • The value being currently inputted in the form element.
  • An “autofilled” value, typically provided by an other form element (i.e. autofilling the post title from its URL).

The highest-priority value is the user input. If there is no user input, we default to the database value provided by the props. And if that one is empty too, we then look for autofilled values.


This package uses React Intl to automatically translate all labels. In order to do so it expects an intl object ot be passed as part of its context. For example, in a parent component:

getChildContext() {
  const intlProvider = new IntlProvider({locale: myLocale}, myMessages);
  const {intl} = intlProvider.getChildContext();
  return {
    intl: intl