tf-svelte-rx-forms
v1.0.3
Published
Reactive svelte forms inspired by angular reactive forms.
Downloads
71
Maintainers
Readme
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>