@felte/reporter-solid


A Felte reporter that uses a custom Solid component to report errors.

Installation

``sh


npm

npm i -S @felte/reporter-solid

yarn

yarn add @felte/reporter-solid
`

Usage

The package exports a reporter function and a ValidationMessage component. Pass the reporter function to the extend option of createForm and add the ValidationMessage component wherever you want your validation messages to be displayed.

The ValidationMessage component needs a for prop set with the name of the input it corresponds to, the child of ValidationMessage is a function that takes the error messages as an argument. This can be either a string, an array of strings, or undefined.

`tsx
import { reporter, ValidationMessage } from '@felte/reporter-solid';
import { createForm } from '@felte/solid';

export function Form() {
const { form } = createForm({
// ...
extend: reporter,
// ...
},
})

return (






{(message) => {message?.[0]}}



{(message) => {message?.[0]}}



);
}


`

Warnings

This reporter can help you display your warning messages as well. If you want your ValidationMessage component to display the warnings for a field you'll need to set the level prop to the value warning. By default this prop has a value of error.

`html

{(message) => {message?.[0]}}

``