Open Volunteer uses
uniforms-ionic packages to create html forms with built-in state management and validation with minimum code.
You usually would not have to install any of these libraries since the reference implementation comes with them already.
Thanks to this integration, Open Volunteer Platform provides you with simple re-usable form components which allows for rapid prototyping and cleaner React components. This source code for the forms is located in
2. Modifying an existing form
In this section we'll see how to add additional information, add validation, or remove information from an existing form.
To do so, we'll use the
client/src/forms/volunteer.ts schema which looks like below.
Adding additional information
Adding additional information to display canbe achieved by only adding the field name and type of the model in question.
E.g if we want to allow volunteers to change their
active status we could add the field as follows
Removing a field
This can be achieved by deleting the field from the form definition object.
Adding validation to postcode field
Let's asssume that we want our volunteer's postcodes can be between
1000-9999, we can add this sort of validation using the min/max boundaries
3. Adding a new form
The process of adding a new custom form requires two steps.
- Defining the schema
- Using the schema in a React Component
Let's take a look at an example by trying to add a form to display product full details in the
Start by defining the schema.
client/src/forms/product.ts file, let's define the following schema.
The schema above will enable us to display full product information which cannot be edited thanks to the
This is because we do not want a volunteer to modify the product details. Only admin can do so.
Let's use it in a component!
The above schema can be used in any react component as follows.
And that's it!
AutoForm will generate a complete form with labeled fields, errors list (if any) and a submit button.
Also, it will take care of validation and handle model changes.