# solid-formly

> Generate a dynamic form for SolidJS

Latest version **0.0.14** (published 2022-07-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install solid-formly
pnpm add solid-formly
yarn add solid-formly
bun add solid-formly
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.14 |
| Published | 2022-07-16 |
| First published | 2022-06-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 75.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Kamal Sahmoud |
| Maintainers | marocdevelop |

## Links

- npm: https://www.npmjs.com/package/solid-formly
- Repository: https://github.com/dyaliCode/solid-formly.git#readme
- Homepage: https://www.solid-formly.com/
- Issues: https://github.com/dyaliCode/solid-formly/issues
- npm.io page: https://npm.io/package/solid-formly

## Recent versions

- 0.0.14 (latest) — 2022-07-16
- 0.0.13 — 2022-07-15
- 0.0.12 — 2022-07-15
- 0.0.11 — 2022-07-13
- 0.0.10 — 2022-07-13
- 0.0.9 — 2022-07-13
- 0.0.8 — 2022-07-13
- 0.0.7 — 2022-07-13
- 0.0.6 — 2022-07-12
- 0.0.5 — 2022-07-07
- 0.0.3 — 2022-07-04
- 0.0.2 — 2022-07-04
- 0.0.1 — 2022-07-04
- 0.0.0 — 2022-06-25

## README

<p>
  <img src="https://assets.solidjs.com/banner?project=Formly&type=package" alt="Solid Formly" />
</p>

> 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 (
    <>
      <Show when={values()}>
        <pre>
          <code>{JSON.stringify(values(), null, 2)}</code>
        </pre>
      </Show>
      <Formly
        form_name={props.form_name}
        fields={props.fields}
        onSubmit={onSubmit}
        btnSubmit={{
          text: "Send"
        }}
        btnReset={{
          text: "Reset",
          classes: ["outline", "btn-primary"]
        }}
        real={true}
      />
    </>
  );
};

export default App;
```

---
_Source: https://npm.io/package/solid-formly · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._