Getting started
High-order components
Components
Developers
1.4.x → 1.5.x
Release
1.5 includes crucial architecture rewrite to allow new features in the future.Removed ImmutableJS
ImmutableJS is no longer a peer dependency of React Advanced Form. Having
react alone is now sufficient to use your favorite form library!Uninstall
immutable package from your project in case you do not use it.Deprecated withImmutable
withImmutableConsequentially after removing immutable from library's dependencies, we deprecated the usage of immutable instances in various callback methods provided by the form. Please use plain JavaScript data types from now on.
FormProvider and Form components no longer support withImmutable prop.Before:
1
const registerUser = ({ fields }) => {
2
/* "fields" is the instance of Immutable.Map */
3
const username = fields.get('username')
4
const value = username.get('value')
5
}
6
7
<Form action={registerUser} withImmutable>
8
<Input name="username" />
9
</Form>
Copied!
After:
1
const registerUser = ({ fields }) => {
2
/* "fields" is a plain Object */
3
const { username } = fields
4
const { value } = username
5
}
6
7
<Form action={registerUser}>
8
<Input name="username" />
9
</Form>
Copied!
Remove
withImmutable prop and (optionally) re-write the usage of immutable instances in callback arguments to use plain JavaScript primitives.Deprecated fields in rule resolvers
fields in rule resolversA rule resolver that references another field is expected to become reactive. Previously, we have used Proxy on fields Object to flush the references fields. However, to enable at least IE11 support we reworked the functionality and introduces a dedicated
get function for reactive field references.1
const validationRules = {
2
name: {
3
confirmPassword: ({ get, value, fieldProps, form }) => {
4
return (value === get(['password']))
5
},
6
},
7
}
Copied!
Replace
fields.foo.bar by get(['foo', 'bar']) in the validation rules resolvers.Changed fieldProps.ref
fieldProps.refThe reference to a field component is now available via
fieldProps.getRef().Before:
1
const validateUsername = ({ fieldProps }) => {
2
const field = fieldProps.ref
3
}
4
5
<Input
6
name="username"
7
rule={validateUsername} />
Copied!
After:
1
const validateUsername = ({ fieldProps }) => {
2
const field = fieldProps.getRef()
3
}
4
5
<Input
6
name="username"
7
rule={validateUsername} />
Copied!
Replace
fieldProps.ref by fieldProps.getRef() whenever it has been used.
Last modified 3yr ago