rx-svelte-forms

Reactive svelte forms inspired by angular reactive forms.

Installation

Using yarn

1yarn add rx-svelte-forms

Using npm

1npm install rx-svelte-forms

Usage

1<script lang="ts">
2	import fb, { validators, form, FormControl } from "rx-svelte-forms";
3
4	/* Custom Async validator */
5	class CustomAsyncValidators {
6		static isEmailInUse(ctrl: FormControl<string>): Promise<string | undefined> {
7			return new Promise(res => {
8				setTimeout(() => res(undefined), 1000)
9			})
10		}
11	}
12
13	const userForm = fb.group({
14		name: ["", [validators.required(), validators.isString(), validators.isAlpha(), validators.minLength(3), validators.maxLength(16)]],
15		email: ["", [validators.required(), validators.isString(), validators.isEmail({ require_tld: true })], [CustomAsyncValidators.isEmailInUse]],
16		termsAndConditions: [false, [validators.requiredTrue()]]
17	})
18
19	$: userForm$ = $userForm;
20	$: name = userForm$.value.name;
21	$: email = userForm$.value.email;
22	$: terms = userForm$.value.termsAndConditions;
23
24	function onSubmit() {
25		console.log(userForm.value);
26	}
27</script>
28
29<form use:form={userForm} on:submit|preventDefault={onSubmit}>
30	<label>
31		Name:
32		<input type="text" name="name" />
33		{#if name.touched && name.error}
34			<p>{name.error}</p>
35		{/if}
36	</label>
37
38	<label>
39		Email:
40		<input type="email" name="email" />
41		{#if email.touched && email.error}
42			<p>{email.error}</p>
43		{/if}
44	</label>
45
46	<label>
47		Terms and Conditions:
48		<input type="checkbox" name="termsAndConditions" />
49		{#if terms.touched && terms.error}
50			<p>{terms.error}</p>
51		{/if}
52	</label>
53
54	<button type="submit" disabled={userForm$.pending || userForm$.invalid}>
55		Submit
56	</button>
57</form>
58
59
60<div style="white-space: pre;">
61	{JSON.stringify(userForm$, undefined, 4)}
62</div>
63
64<style>
65	:global(.rsf-touched.rsf-error) {
66		border: 1px solid red;
67	}
68</style>