README
form
vdux form component
Installation
$ npm install vdux-form
Usage
API - props
onSubmit
- Handles a form submission. Receives the contents of the form, serialized to JSON, and casted bycast
(if specified).validate
- Validate the JSON contents of the form. BlocksonSubmit
if not valid. Refer to the validation section for more details.cast
- Before being validated you can transform the model with this. It should accept a model and return a new model.loading
- Whether or not the form is currently loading. Iftrue
, submits will be disabled. Defaults to false.transformError
- Transform an error response from youronSubmit
function into a form that is consumable byvdux-form
. A default can be specified usingsetTransformError
.onSuccess
- Run ifonSubmit
succeeds; receives the result as its first argumentonFailure
- Run ifonSubmit
throws an error; receives the error as its first argument
Validation
Your validate
function should accept a model and return an object of the form:
{valid: Boolean, errors: [Errors]}
If valid
is false
, errors
should include a list of invalid fields. Each error
entry should have the form:
{field, message}
Where field
is the name
attribute of the form field that the message
applies to. Your message
will then be set on the appropriate field using setCustomValidity. This will trigger an invalid event on that form field, which you can capture on the input.
Example
import Form from 'vdux-form'
function render () {
return (
<Form validate={validate}>
<input name='username' onInvalid={e => setError(e.target.validationMessage)} />
{
error && <span class='error'>{error}</span>
}
</Form>
)
}
function validate ({username}) {
if (username.length < 3) {
return {
valid: false,
errors: [{field: 'username', message: 'Username must be at least 3 characters long'}]
}
}
return {
valid: true
}
}
Error handling
You can specify a default transform for your errors like this:
import Form from 'vdux-form'
Form.setTransformError(err => ({
if (err.status === 400) {
return err.errors
}
}))
License
MIT