The modular and type-safe form library for SolidJS, Qwik and Preact
MIT License
Bot releases are hidden (Show)
Published by fabian-hiller over 1 year ago
Many thanks to @jamiev-dfm and the Qwik team for contributing to this release.
formAction$
is used multiple times (issue #62)Published by fabian-hiller over 1 year ago
Published by fabian-hiller over 1 year ago
transform
property to initializeFieldStore
utilPublished by fabian-hiller over 1 year ago
Many thanks to @RBleyenberg and @atk for contributing to this release.
transform
prop to Field
component (issue #40)toCustom
transformation functionInitialValues
and MaybeFunction
utility typePublished by fabian-hiller over 1 year ago
Many thanks to @RBleyenberg and @atk for contributing to this release.
transform
prop to Field
component (issue #40)toCustom
transformation functionPublished by fabian-hiller over 1 year ago
Many thanks to @kieran-mgc for contributing to this release.
insert
, move
and remove
method (issue #61)Published by fabian-hiller over 1 year ago
Many thanks to @kieran-mgc for contributing to this release.
insert
, move
and remove
method (issue #61)Published by fabian-hiller over 1 year ago
Many thanks to @kieran-mgc for contributing to this release.
getValues
method when adding new fields or array items (issue #60)Published by fabian-hiller over 1 year ago
Published by fabian-hiller over 1 year ago
Note: The package has been revised and refactored and it would be too complicated to mention every change here. Please create an issue if you encounter problems.
createForm
primitive to createFormStore
createForm
primitive with linked componentschildren
property of Field
componenttype
property to Field
component<input type="number" />
value
required on insert
and replace
methodminFiles
, maxFiles
, minNumber
and maxNumber
validation functioncreateForm
primitiveTo improve the API design, we changed the return value of the createForm
primitive. Previously, only the store of the form was returned. Now the Form
, Field
and FieldArray
components are also returned. A complete rework of the code base made this possible without increasing the bundle size.
This change eliminates the need to add the form store to each Form
, Field
and FieldArray
component. This reduces the JSX code on your side and improves the DX.
If you want to keep the library as modular as possible with the same API design as before, we have added the
createFormStore
primitive.
You now need to make the following changes in your code:
// Change this
import { createForm, Form, Field, FieldArray } from '@modular-forms/solid';
const form = createForm();
<Form of={form} />
<Field of={form} />
<FieldArray of={form} />
// To that
import { createForm } from '@modular-forms/solid';
const [form, { Form, Field, FieldArray }] = createForm();
<Form />
<Field />
<FieldArray />
Field
componentTo the Field
component we have added the type
property which defines the data type of your field. However, this only needs to be set if you want to capture something other than a string.
This change now allows you to capture any data type that the <input />
, <select />
and <textarea />
elements can return. For example, <input type="date" />
can return a date string, a date object or a number representing the date. With type
you can now freely decide which data type you need.
This new feature is fully typed and makes your form now completely type safe. It is now no longer possible to accidentally enter the wrong data type. Furthermore, TypeScript tells you if you have forgotten the type
property and helps you fill it in with autocompletion.
In most cases, no change in your code will be necessary, since for strings, as already mentioned, the type
property is optional. In all other cases, you must now add the type
property.
// Change this
<Field name="age" />
// To that
<Field name="age" type="number" />
Furthermore, we have removed the props
you need to pass to an <input />
, <select />
and <textarea />
element from the store of a field and instead passed it as the second parameter to the function of the children
property.
You now need to make the following changes in your code:
// Change this
<Field name="foo">{(field) => <input {...field.props} />}</Field>
// To that
<Field name="foo">{(field, props) => <input {...props} />}</Field>
As a last major change, but one that is unlikely to affect anyone, we have removed superfluous validation functions.
// Change this
minFiles(2, 'Your message')
maxFiles(4, 'Your message')
// To that
minLength(2, 'Your message')
maxLength(4, 'Your message')
// And this
minNumber(0, 'Your message')
maxNumber(10, 'Your message')
// To
minRange(0, 'Your message')
maxRange(10, 'Your message')
Published by fabian-hiller over 1 year ago
Many thanks to @juanpmarin for contributing to this release.
Note: The package has been refactored and not every change is listed here. Please create an issue if you encounter problems.
active
property from RawFieldState and RawFieldArrayState typeField
componentformAction$
(issue #50)custom
, minFiles
, maxFiles
, minNumber
and maxNumber
validation functiongetValues
and remove getArrayValues
methodPublished by fabian-hiller over 1 year ago
Published by fabian-hiller over 1 year ago
Many thanks to @RBleyenberg and @jmcelreavey for contributing to this release.
updateFieldDirty
utilgetInitialStores
utilsetValues
and improve setValue
method (issue #35)Published by fabian-hiller over 1 year ago
Many thanks to @GrandSchtroumpf for contributing to this release.
type
property to Field
componentgetElementInput
utilDate
to FieldValue
type (issue #34)getFormDataValues
utilminRange
and maxRange
validation functionminFiles
, maxFiles
, minNumber
and maxNumber
validation functionPublished by fabian-hiller over 1 year ago
Published by fabian-hiller over 1 year ago
Many thanks to @tuurbo for contributing to this release.
data
of FormResponse
type (issue #37)Published by fabian-hiller over 1 year ago
Many thanks to @tuurbo for contributing to this release.
zodField$
and zodForm$
to allow passing a function (issue #38)data
property to FormResponse
type (issue #37)Published by fabian-hiller over 1 year ago
Many thanks to @GrandSchtroumpf for contributing to this release.
getElementInput
util (issue #34)Published by fabian-hiller over 1 year ago
Many thanks to @tuurbo for contributing to this release.
reloadDocument
prop to Form
component (issue #31)Published by fabian-hiller over 1 year ago
Thank you @jmcelreavey, @tuurbo and @lbensaad for your input!
formAction$
custom$
validation function and deprecate custom
(issue #32)