Getting Started
Quick Start
Introduction
With Svelte Formly you can generate a dynamic forms with custom rules and styles for web application's sveltejs and sveltekit.
EXPERIMENTAL
- ⚡ Generate dynamic and reactive forms.
- 🙂 Easy to extend with custom field type and validation.
Quick Installation
npm install svelte-formly
Usage
Example
<script lang="ts">
import { Formly, type IField } from 'svelte-formly';
const form_name = 'formly_usage';
const fields: IField[] = [
{
type: 'input', // required
name: 'firstname', // required
attributes: {
type: 'text',
id: 'firstname', // required
classes: ['form-control'],
placeholder: 'Tap your first name'
},
rules: ['required', 'min:3', 'max:10'],
messages: {
required: 'The firstname is required',
min: 'Your firstname is too short min=3',
max: 'Your firstname is too long max=10'
}
},
{
type: 'input', // required
name: 'password', // required
attributes: {
type: 'password',
id: 'password', // required
classes: ['form-control'],
placeholder: 'Tap your password',
autocomplete: 'off'
},
rules: ['required', 'min:6', 'max:10'],
messages: {
required: 'The password is required',
min: 'Your password is too short min=6',
max: 'Your password is too long max=10'
}
}
];
let data = {};
const onSubmit = ({ detail }: any) => {
data = detail;
};
</script>
<Formly {fields} {form_name} on:submit={onSubmit} />
Result
{}