solform
A form management library for SolidJS that is very lightweight and simple!
Why solform
- Very easy, fast, lightweight and powerful!
- It has built-in validation.
- You can easily customize it!
- Full type support
Create form
// Simplest
import { createForm } from "solform";
function App() {
const { values, register } = createForm<{name: string}>();
return <input {...register("name")}>;
}
// Next Level
import { createForm, requiredValidator, emailValidator } from "solform";
function App() {
const { values, register, submit, errors } = createForm<{email: string, count: number }>({
validators: {
count: requiredValidator("Count is required"),
email: [requiredValidator("This field is required"), emailValidator("Value should be email!")]
},
onSubmit: (values) => {
// type safe values
console.log(values);
}
});
return (
<div>
<input {...register("email")} type="email">
{errors.email && <p class="error">{errors.email}</p>}
{/* When you read count, it will be converted to number */}
<input {...register("count")} type="number">
<button onClick={submit}>Submit</button>
<div/>)
}
// Full
import { createForm, requiredValidator, emailValidator } from "solform";
function App() {
const { values, register, submit, loading, getAllValues, getValue, setValue, errors, watch } = createForm<{email: string, count: number }>({
initialValues: {
count: 0
},
validators: {
count: requiredValidator("Count is required"),
email: [requiredValidator("This field is required"), emailValidator("Value should be email!")]
},
onSubmit: async (values) => {
await sleep(2000); // it will automatically set loading to true
console.log(values);
// loading is false again
}
});
// will call the given function whenever the count changes
watch("count", (updatedCount) => {
console.log(updatedCount);
})
return (
<div>
<input {...register("email")} type="email">
{errors.email && <p class="error">{errors.email}</p>}
{/* When you read count, it will be converted to number */}
<input {...register("count")} type="number">
<button onClick={submit} disabled={loading}>{loading ? "Loading..." : "Submit"}</button>
<div>
)
}
Built-in validators
- minLengthValidator(minLength, errorMessage)
- maxLengthValidator(maxLength, errorMessage)
- requiredValidator(errorMessage)
- emailValidator(errorMessage)
Creating new validators
const minimumNumberValidator =
(minNumber: number, errorMessage: string): SolFormValidator<number> =>
(val) =>
val < minNumber ? errorMessage : undefined;
Tactics
- Always use watch inside a component, because it will call onMount and onCleanup.
- More soon...
What is next?
- Support for more fields, such as radio group
- Validate on change option.
How to contribute?
- Get a fork of this package, do your changes and create a pull request.
- Found a bug? create an issue.
27 Dec 21, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
196 Dec 20, 2022
8 Nov 2, 2022
18 Oct 23, 2022
26 Dec 8, 2022
159 Dec 10, 2022
91 Dec 27, 2022
4 Jan 2, 2023
2 Dec 24, 2022
1 Jan 2, 2022
4 Sep 26, 2021
28 Dec 28, 2022
205 Jan 7, 2023
14 Dec 24, 2022
10 Jan 8, 2023