vulcan:forms package provides a
SmartForm component that lets you easily generate new document and edit document forms.
This package can generate new document and edit document forms from a schema. Features include:
- Error handling.
- 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.
New document form:
Edit document form:
The collection in which to edit or insert a document.
If present, the document to edit. If not present, the form will be a “new document” form.
A callback called on form submission on the form data. Should return the
data object as well.
A callback called on method success.
A callback called on method failure.
If provided, will show a “cancel” link next to the form’s submit button.
A set of props to prefill for new documents.
An array of field names, if you want to restrict the form to a specific set of fields.
A GraphQL fragment used to specify the data to fetch to populate
If no fragment is passed, SmartForms will do its best to figure out what data to load based on the fields included in the form.
A GraphQL fragment used to specify the data to return once a mutation is complete.
If no fragment is passed, SmartForms will only return fields used in the form, but note that this might sometimes lead to discrepancies when compared with documents already loaded on the client (an example would be a
createdAt date added automatically on creation even though it’s not part of the actual form).
SmartForm components makes the following objects available as context to all its children:
An object containing optional autofilled properties.
A function that takes a property, and adds it to the
A callback function that can be used to throw an error.
A function that lets you retrieve the current document from a form component.
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:
If you prefer, you can also code your own forms from scratch, either using
withRemove, or with your own custom mutation HoCs.