rx-svelte-forms

Reactive svelte forms inspired by angular reactive forms.

Installation

Using yarn

yarn add rx-svelte-forms

Using npm

npm install rx-svelte-forms

Usage

<script lang="ts">
    import fb, { validators, form, FormControl } from "rx-svelte-forms";

    /* Custom Async validator */
    class CustomAsyncValidators {
        static isEmailInUse(ctrl: FormControl<string>): Promise<string | undefined> {
            return new Promise(res => {
                setTimeout(() => res(undefined), 1000)
            })
        }
    }

    const userForm = fb.group({
        name: ["", [validators.required(), validators.isString(), validators.isAlpha(), validators.minLength(3), validators.maxLength(16)]],
        email: ["", [validators.required(), validators.isString(), validators.isEmail({ require_tld: true })], [CustomAsyncValidators.isEmailInUse]],
        termsAndConditions: [false, [validators.requiredTrue()]]
    })

    $: userForm$ = $userForm;
    $: name = userForm$.value.name;
    $: email = userForm$.value.email;
    $: terms = userForm$.value.termsAndConditions;

    function onSubmit() {
        console.log(userForm.value);
    }
</script>

<form use:form={userForm} on:submit|preventDefault={onSubmit}>
    <label>
        Name:
        <input type="text" name="name" />
        {#if name.touched && name.error}
            <p>{name.error}</p>
        {/if}
    </label>

    <label>
        Email:
        <input type="email" name="email" />
        {#if email.touched && email.error}
            <p>{email.error}</p>
        {/if}
    </label>

    <label>
        Terms and Conditions:
        <input type="checkbox" name="termsAndConditions" />
        {#if terms.touched && terms.error}
            <p>{terms.error}</p>
        {/if}
    </label>

    <button type="submit" disabled={userForm$.pending || userForm$.invalid}>
        Submit
    </button>
</form>


<div style="white-space: pre;">
    {JSON.stringify(userForm$, undefined, 4)}
</div>

<style>
    :global(.rsf-touched.rsf-error) {
        border: 1px solid red;
    }
</style>