Formaldehyde
What
React form creation/validation/population. Supports top-down rendering with input population. Keeps the immutable data structures mindset.
Why
We needed something elegant for creating forms and inputs that self populate, require no state, and at a input AND form levels, have easy use for validation.
How
Install
$ npm i formaldehyde
# CreateUserFormjs;; Component { // if there is no action on the Form or if it returns nothing, this gets called immiediately // otherwise if the action returns a promise, it will wait for it to finish // the result is the result of the promise. thisprops; } { // this function returns an array of errors. const errors = ; if !modelagree errors; return errors; } { return <Form action= thispropsaction onSuccess= ::thisonSuccess validateForm= ::thisonFormValidate model= {} showValidationErrors> <p> <Input type="text" name="full_name" placeholder="Full Name" required /> </p> <p> <Input type="checkbox" name="agree" /> </p> <p> <SubmitButton className="button">Create User</SubmitButton> </p> </Form> ; }
How do input's get their data?
The built-in formaldehyde inputs use their name
prop to get data off of the Form
's model
prop object.
So if <Form model={{ product: { name:'formaldehyde' } }}>
has a child Input that looks like <Input name="product.name" />
it will get the model's product.name
, "formaldehyde"
.
It will pre-populate the input with that data as well as use that to set the model when it is being submitted.
How do I make my own custom input?
Since Formaldehyde
uses React Context, you will need to implement registering the component, unregistering it, and getting the data from your component when its about to be submitted or validated.
static contextTypes = registerFormControl: PropTypesfuncisRequired unregisterFormControl: PropTypesfuncisRequired ;
We will register the component on componentDidMount
and unregister on componentWillUnmount
. Here is an example of the most simple way to handle it.
Component static contextTypes = registerFormControl: PropTypesfuncisRequired unregisterFormControl: PropTypesfuncisRequired ; { super...args; thisstate = {}; } { thiscontext; if thispropsautofocus thisrefsinput; } { thiscontext; }
Now we will need to implement the method getValue
that the Form
will use to gather the data, remember it will automatically read the prop name
passed to your custom input.
Component static contextTypes = registerFormControl: PropTypesfuncisRequired unregisterFormControl: PropTypesfuncisRequired ; { super...args; thisstate = {}; } { thiscontext; if thispropsautofocus thisrefsinput; } { thiscontext; } { return thisstatevalue; // getValue is automatically invoked after being register when the Form is submitted. }
Okay, how do I pre-populate my data from the model, because I'm editing an existing model!
So we have another context
call back we can use. getFormModelValue(name)
.
Component static contextTypes = registerFormControl: PropTypesfuncisRequired unregisterFormControl: PropTypesfuncisRequired ; { superprops context; thisstate = value: context // preload ; } { thiscontext; if thispropsautofocus thisrefsinput; } { thiscontext; } { return thisstatevalue; // getValue is automatically invoked after being register when the Form is submitted. }