Redux form
Description
The REGARDS frontend uses the redux-form library to create forms.
This library stores in the common redux store
all informations about the current state of the form.
How to use
Simple example
import { reduxForm } from 'redux-form'
import { RenderTextField, Field, ErrorTypes, ValidationHelpers } from '@regardsoss/form-utils'
export class ExampleComponent extends React.Component {
componentDidMount() {
const initialValues = {
// initialize the form field named 'label'
label: 'default label',
}
this.props.initialize(initialValues)
}
handleSubmit(formValues) {
...
}
render() {
return (
{ /*
Form with onSubmitMethod: onSubmit is first delegated to redux handleSubmit method that calls this.handleSubmit after execution. That mechanism allows Redux forms to compute mulitple state variable (pristine, invalid, submitting...)
*/ }
<form onSubmit={this.props.handleSubmit(this.handleSubmit)}>
<Field
name="label" // field name
component={RenderTextField} // field render component
type="text" // field type
label="Label" // field label to display at user
validate={ValidationHelpers.validRequiredString} // validator: computes if the field value is valid
fullWidth // field consumes parent full width, quite standard in REGARDS frontend
/>
</form>
)
}
}
/* export the field as connected: reduxForm method will decorate ExampleComponent to add many properties like:
* pristine: has the form changed?
* submitting: is the form currently submitting?
* invalid: is there an invalid field in form?
* handleSubmit: submit method wrapper
* ...
*/
export default reduxForm({
form: 'example-form' // form name in redux store
})(ExampleComponent)