1.0.59 • Published 1 year ago
svelte-forma v1.0.59
Svelte Forma
- 📦 Super light 3.3kb (1.5k gzip)
- 🚀 Very easy to use
- 😎 Minimum API for the best experience
- 🔥 Reactive
- 🗒 Type safe
- 🖋 Controllable inputs
npm install svelte-forma # or yarn add svelte-forma
<!-- Form.svelte -->
<script>
import { useForm } from "svelte-forma";
import ErrorMessage from "./ErrorMessage"
const { form, handleSubmit, validators, formState } = useForm();
let name = "";
let agree = false
</script>
<form use:form on:submit={handleSubmit(() => {
console.log("submitted", name)
name = ""
})}>
<input
name="name"
bind:value={name}
use:validators={[
(value) => Boolean(value) || "Field is required"
]}
/>
<ErrorMessage name="name" {formState} />
<input
name="agree"
use:validators={[
(value) => value === 'true' || 'Field is required';
]}
type="checkbox"
on:input={(e) => {
agree = e.currentTarget.checked;
}}
checked={agree}
value={agree}
/>
<ErrorMessage name="agree" {formState} />
<button type="submit">Submit</button>
</form>
<!-- ErrorMessage.svelte -->
<script lang="ts">
import type { IFormState } from 'svelte-forma/dist/IForm';
import type { Writable } from 'svelte/store';
export let formState: Writable<IFormState>;
export let name: string;
</script>
{#if $formState?.errors?.[name] && $formState?.touched?.[name] && $formState?.dirty?.[name]}
<div>
<span class="font-medium text-sm text-red-500">
{$formState?.errors?.[name]}
</span>
</div>
{/if}
1.0.33
1 year ago
1.0.32
1 year ago
1.0.37
1 year ago
1.0.36
1 year ago
1.0.35
1 year ago
1.0.34
1 year ago
1.0.39
1 year ago
1.0.38
1 year ago
1.0.40
1 year ago
1.0.44
1 year ago
1.0.43
1 year ago
1.0.42
1 year ago
1.0.41
1 year ago
1.0.48
1 year ago
1.0.47
1 year ago
1.0.46
1 year ago
1.0.45
1 year ago
1.0.51
1 year ago
1.0.55
1 year ago
1.0.54
1 year ago
1.0.53
1 year ago
1.0.52
1 year ago
1.0.59
1 year ago
1.0.58
1 year ago
1.0.57
1 year ago
1.0.56
1 year ago
1.0.28
2 years ago
1.0.27
2 years ago
1.0.26
2 years ago
1.0.25
2 years ago
1.0.24
2 years ago
1.0.23
2 years ago
1.0.22
2 years ago
1.0.21
2 years ago
1.0.20
2 years ago
1.0.19
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago