https://github.com/sanichkotikov/solid-create-form
A tiny Solid utility to control forms.
https://github.com/sanichkotikov/solid-create-form
form forms no-dependencies npm-module npm-package solid-js tiny-library
Last synced: 11 months ago
JSON representation
A tiny Solid utility to control forms.
- Host: GitHub
- URL: https://github.com/sanichkotikov/solid-create-form
- Owner: SanichKotikov
- License: mit
- Created: 2021-09-27T04:53:48.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-09-16T09:41:37.000Z (over 1 year ago)
- Last Synced: 2025-03-18T10:51:30.324Z (11 months ago)
- Topics: form, forms, no-dependencies, npm-module, npm-package, solid-js, tiny-library
- Language: TypeScript
- Homepage:
- Size: 129 KB
- Stars: 14
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# solid-create-form
A tiny (~644 B) Solid utility to control forms.
Please note, this library assumes that `onChange` has the following interface: `(value: T) => void;`. So if your
controls call onChange with event instead of new value, you may need write some simple wrapper for form handlers.
## Usage
```typescript jsx
import { createForm } from 'solid-create-form';
import { Input } from 'custom/Input';
interface FormValues {
login: string;
password: string;
}
export function ExampleForm() {
const onSubmit = (data: FormValues) => console.log(data);
const { values, handlers, wrapSubmit } = createForm({
defaultValues: { login: '', password: '' },
});
return (
);
}
```
### Validation rules
You can set validation rules for each field:
```typescript jsx
function required(value: string): boolean | string {
return !!value.trim() || 'Required field';
}
const {} = createForm({
defaultValues: { login: '', password: '' },
rules: { login: [required], password: [required] }
});
```
All rules will be checked on first submit event. After that any changes will trigger revalidation for changed field.
Rule function takes two arguments, value of current field and values of all fields. So, you can compare different
fields, for example in create or change password form:
```typescript jsx
function samePassword(confirm: string, values: FormValues): boolean | string {
return confirm === values.password || 'Passwords do not match. Please try again.';
}
const {} = createForm({
defaultValues: { password: '', confirm: '' },
rules: { password: [required], confirm: [samePassword] },
});
```
Please note that values object contains previous value of current field during revalidation.
### Set errors manually
For example for errors that comes from server.
```typescript jsx
const { setErrors } = createForm();
const someAction = () => {
setErrors({ password: 'Some error text' });
};
```
### Checking that form has changed values
```typescript jsx
const { isDirty } = createForm();
```
### Checking that form data is valid
```typescript jsx
const { isValid } = createForm();
```
### Resetting form values
```typescript jsx
const { reset } = createForm();
reset()}>Reset
```
With reset function you can set new initial values:
```typescript jsx
const { reset } = createForm();
reset({ field: 'new value' })}>Reset
```