Skip to content

dyaliCode/svelte-formly

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Svelte Formly

Svelte Formly

by @kamalkech

js-standard-style CircleCI svelte-v3

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} />