https://github.com/dyaliCode/svelte-formly

Generator dynamic forms for Svelte JS
https://github.com/dyaliCode/svelte-formly

form formly forms svelte svelte-form svelte-framework svelte-js svelte-v3

Last synced: 17 days ago
JSON representation

Generator dynamic forms for Svelte JS

• Host: GitHub
• URL: https://github.com/dyaliCode/svelte-formly
• Owner: dyaliCode
• License: mit
• Created: 2019-11-22T09:51:41.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-06T21:50:33.000Z (about 1 year ago)
• Last Synced: 2024-11-22T12:02:51.677Z (21 days ago)
• Topics: form, formly, forms, svelte, svelte-form, svelte-framework, svelte-js, svelte-v3
• Language: Svelte
• Homepage: https://svelte.formly-js.com
• Size: 732 KB
• Stars: 252
• Watchers: 13
• Forks: 29
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - dyaliCode/svelte-formly - Generator dynamic forms for Svelte JS (svelte)

README

        


  



# Svelte Formly

by [@kamalkech](https://github.com/kamalkech)

[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) [![CircleCI](https://circleci.com/gh/beyonk-adventures/svelte-component-livereload-template.svg?style=shield)](https://circleci.com/gh/beyonk-adventures/svelte-component-livereload-template) [![svelte-v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev)

## Introduction

- ⚡️ Generate dynamic and reactive forms.

- 😍 Easy to extend with custom field type, custom validation.

## Documentation

[Link Documentation](https://svelte.formly-js.com/)

## Quick Installation

```shell

npm install svelte-formly

```

## Usage

```typescript

  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);

  };

```