modular-forms

Many thanks to @jamiev-dfm and the Qwik team for contributing to this release.

• Fix bug when formAction$ is used multiple times (issue #62)
• Upgrade Qwik and Qwik City peer dependency to v1 🎉

• Initial release

• Fix bug by adding missing transform property to initializeFieldStore util

Many thanks to @RBleyenberg and @atk for contributing to this release.

• Add transform prop to Field component (issue #40)
• Add toCustom transformation function
• Remove unused InitialValues and MaybeFunction utility type

Many thanks to @RBleyenberg and @atk for contributing to this release.

• Add transform prop to Field component (issue #40)
• Add toCustom transformation function

Many thanks to @kieran-mgc for contributing to this release.

• Fix sorting bug in insert, move and remove method (issue #61)

Many thanks to @kieran-mgc for contributing to this release.

• Fix sorting bug in insert, move and remove method (issue #61)

Many thanks to @kieran-mgc for contributing to this release.

• Fix update bug in getValues method when adding new fields or array items (issue #60)

• Upgrade Qwik and Qwik City peer dependency

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.

• Rename createForm primitive to createFormStore
• Add createForm primitive with linked components
• Change children property of Field component
• Add type property to Field component
• Change behaviour of controlled <input type="number" />
• Make value required on insert and replace method
• Remove minFiles, maxFiles, minNumber and maxNumber validation function

Migration guide

createForm primitive

To 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 component

To 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>

Validation functions

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')

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.

• Remove active property from RawFieldState and RawFieldArrayState type
• Remove unnecessary code from Field component
• Add log statement for unknown errors to formAction$ (issue #50)
• Remove deprecated custom, minFiles, maxFiles, minNumber and maxNumber validation function
• Refactor getValues and remove getArrayValues method

• Downgrade Qwik and Qwik City peer dependency due to a bug in Qwik

Many thanks to @RBleyenberg and @jmcelreavey for contributing to this release.

• Fix date support at updateFieldDirty util
• Fix and refactor getInitialStores util
• Add setValues and improve setValue method (issue #35)
• Upgrade Qwik and Qwik City peer dependency (issue #45)

Many thanks to @GrandSchtroumpf for contributing to this release.

• Add type property to Field component
• Change implementation of getElementInput util
• Add Date to FieldValue type (issue #34)
• Add date support to getFormDataValues util
• Add number and date support to minRange and maxRange validation function
• Deprecate minFiles, maxFiles, minNumber and maxNumber validation function

• Upgrade Qwik and Qwik City to v1 release candidate (issue #45)

Many thanks to @tuurbo for contributing to this release.

• Improve types for optional properties and parameters
• Add generic to type data of FormResponse type (issue #37)

Many thanks to @tuurbo for contributing to this release.

• Extend parameter of zodField$ and zodForm$ to allow passing a function (issue #38)
• Add data property to FormResponse type (issue #37)

Many thanks to @GrandSchtroumpf for contributing to this release.

• Refactor processing of numbers in getElementInput util (issue #34)

Many thanks to @tuurbo for contributing to this release.

• Add reloadDocument prop to Form component (issue #31)

Thank you @jmcelreavey, @tuurbo and @lbensaad for your input!

• Change return type of first argument of formAction$
• Add custom$ validation function and deprecate custom (issue #32)