meteor-example-form-react is a sample Meteor 1.8 application that illustrates how to use Uniforms for form development.
Some of the features of this example:
- In order to focus on form processing, the application has just two pages: Create Student and Edit Student.
- A variety of common controllers are shown: text box, text area, single selection, multiple selection, date selection, and radio boxes.
- Two customized versions of Uniform controllers illustrate how to extend the built-in Uniforms controllers.
- The forms in this example update two Mongo collections, illustrating the situation where there is not a one-to-one correspondence between the collection schema and the form schema.
- There is a 35 minute YouTube screencast providing a walkthrough of the code.
First, install Meteor.
Second, download this repository to your computer. You can download it as a zip file, or you can click the “Use as template” button to create your own copy of the system, then clone it to your local computer.
Third, cd into the app/ directory of your local copy of the repo, and install third party libraries with:
$ meteor npm install
Running the system
Once the libraries are installed, you can run the application by invoking the “start” script in the package.json file:
Note regarding “bcrypt warning”:
You will get the following message when you run this application:
On some operating systems (particularly Windows), installing bcrypt is much more difficult than implied by the above message. Bcrypt is only used in Meteor for password checking, so the performance implications are negligible until your site has very high traffic. You can safely ignore this warning without any problems during initial stages of development.
Viewing the running app
If all goes well, the application will appear at http://localhost:3000.
You can verify that the code obeys our coding standards by running ESLint over the code in the imports/ directory with:
meteor npm run lint
To best understand this application, it is useful to familiarize yourself with:
Meteor Application Template React. This sample application illustrates conventions for directory layout, naming conventions, routing, integration of Semantic UI, and coding standards. Meteor-example-form is based on this template, so we won’t discuss any of these issues here.
Semantic UI React. We use Semantic UI for this template.
Uniforms. Uniforms is a library for simplifying form management with React, and includes built-in integration with Semantic UI. It’s worth reviewing Managing forms in a Meteor/React project with the uniforms package before looking at meteor-example-form-react.
The landing page for this application provides the Create Student form:
This form has the following input controls:
- Name and Email: text fields, both required.
- Biographical statement: text area, optional.
- Level: select field, required. Default is Freshman
- GPA: select field, required. User must choose one.
- Date enrolled: date field. Defaults to current time and day.
- Hobbies: multiple select field (custom implementation of a Uniform controller, code is here).
- Major: select field implemented as Radio buttons (custom implementation to provide inline layout, code is here).
A filled out but not yet submitted Create Student form looks like this:
After submission, the page pops up an alert showing the submission was successful:
Also note that after dismissing the alert, there is a link of the Create Student page to a page where you can edit the document. Here is this page:
You can edit the fields, then click ‘Update’ to save the changes.
Watch a 35 minute screencast explaining this system at https://www.youtube.com/watch?v=ZCHf_rNbDaM.
About the uncaught Invariant Violation
When trying to adapt this code to your own system, you may run into an “Uncaught Invariant Violation” error such as the following:
Uncaught Invariant Violation: Unrecognised schema: [object Object] at invariant (http://localhost:3000/packages/modules.js?hash=47f8337f349efabcae6273a0f71bd738a87021b9:30144:15) at createSchemaBridge (http://localhost:3000/packages/modules.js?hash=47f8337f349efabcae6273a0f71bd738a87021b9:106086:29) at _class.BaseForm (http://localhost:3000/packages/modules.js?hash=47f8337f349efabcae6273a0f71bd738a87021b9:105699:50)
The reason for this error is that your code has not imported the Uniforms Simple Schema Bridge. You should include the following import statement in all files containing Uniforms-based forms:
Including this import statement will fix the error.