Form

The form prop passed to the component by connect (or render prop in the case of FormProvider/LocalForm) contains computed properties about the state of the form and a collection of methods for dispatching actions to the store.

Property Type Description
name string The name of the form.
values object The values of the form.
valid boolean Whether all fields pass their validation rules.
errors array An array of all the error messages for each field failing validation.
errorCount number The total number of validation errors (equal to the length of errors).
extra object The extra property specified in config.
set function Set one or several field values at once. Accepts an object matching the form's schema. For example, in the case of the form defined here, calling select({ name: 'Axel Yung', email: 'axelyung@gmail.com' }) will update the name and email fields.
clear function Clears all form values. Boolean values will be set to false.
reset function Resets all form values to defaults. If not default value was given in the fields configuration, the value will be set to the initial value.
select function Selects a field with a string key argument and returns a field.
showErrors function Shows/hides errors for all fields failing validation or rather sets the errorMessage property of each field to the first validation error if any. Calling showErrors() or showErrors(true) will display errors while showErrors(false) will hide them.
extract function A utility function for extracting a particular attribute for all fields. For example extract('id') will return the id attributes for all fields.

Example

class LoginForm extends React.Component {
    render() {
        const { valid, clear, reset, errors, ... } = this.props.loginForm;
        ...
        return (
            <form>
                ...

                <div>
                    <button disabled={!valid}>Login</button>
                    <button onClick={reset}>Reset</button>
                    <button onClick={clear}>Clear</button>
                </div>
                <ul>
                    {errors.map(err => (<li>{err}</li>))}
                </ul>
            </form>
        )
    }
}

export default connect.loginForm(LoginForm);

results matching ""

    No results matching ""