Svelte Formly

by @kamalkech

Introduction

• ⚡️ Generate dynamic and reactive forms.
• 😍 Easy to extend with custom field type, custom validation.

Documentation

Link Documentation

Quick Installation

npm install svelte-formly

Usage

<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'
      }
    }
  ];

  const onSubmit = ({ detail }: any) => {
    console.log('values:', detail);
  };
</script>

<Formly {fields} {form_name} on:submit={onSubmit} />