https://github.com/dyalicode/solid-formly

https://github.com/dyalicode/solid-formly

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/dyalicode/solid-formly
• Owner: dyaliCode
• License: mit
• Created: 2022-06-25T20:28:21.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-09-04T22:48:04.000Z (over 2 years ago)
• Last Synced: 2024-10-08T16:44:34.287Z (3 months ago)
• Language: TypeScript
• Homepage: https://solid.formly-js.com
• Size: 280 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  



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

# Solid Fromly [![npm Version](https://img.shields.io/npm/v/solid-formly.svg?style=flat-square)](https://www.npmjs.org/package/solid-formly)

## Features

- ⚡️ Generate dynamic and reactive forms.

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

## Documentation

[Link Documentation](https://www.solid-formly.com/)

## Installation

```sh

> npm i solid-formly

```

## Usage for solidjs & solid-start

```js

import { createSignal, Show } from "solid-js";

import { Formly, IValue, IField } from "solid-formly";

const form_name = "formly_usage";

const fields: IField[] = [

  {

    type: "input",

    name: "firstname",

    attributes: {

      type: "text",

      id: "firstname",

      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",

    name: "password",

    attributes: {

      type: "password",

      id: "password",

      classes: ["form-control"],

      placeholder: "Tap your first name",

      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 App = () => {

  const [values, setValues] = createSignal < any > null;

  const onSubmit = (data: IValue) => {

    setValues(data);

  };

  return (

    <>

      

        

          {JSON.stringify(values(), null, 2)}

        

      

      

    >

  );

};


export default App;

```