Let your data build your UI, with Astro components
Find a file
2022-09-26 11:12:25 +02:00
.vscode Initial commit 2022-09-25 20:09:11 +02:00
src feat: support for labelPosition, radio/checkboxed checked value 2022-09-26 11:11:27 +02:00
test Initial commit 2022-09-25 20:09:11 +02:00
.editorconfig Initial commit 2022-09-25 20:09:11 +02:00
.eslintignore Initial commit 2022-09-25 20:09:11 +02:00
.eslintrc.cjs Initial commit 2022-09-25 20:09:11 +02:00
.gitignore docs: project readme 2022-09-25 21:38:24 +02:00
.prettierrc.cjs Initial commit 2022-09-25 20:09:11 +02:00
index.ts feat: multiple controls 2022-09-25 21:33:19 +02:00
package.json 0.0.6 2022-09-26 11:12:25 +02:00
README.md docs: update readme 2022-09-26 11:12:10 +02:00
tsconfig.json Initial commit 2022-09-25 20:09:11 +02:00

Astro Reactive Form 🔥

The Reactive Form component for Astro 🔥

npm npm npm github

All contributions are welcome.

Installation

npm i astro-reactive-form

Usage

---
import Form, { FormGroup } from "astro-reactive-form";

const form = new FormGroup([
  {
    name: 'first-name',
    value: 'Ayo',
    label: 'First Name',
  },
  {
    name: 'last-name',
    value: 'Ayco',
    label: 'Last Name',
  },
]);
---
<Form formGroup={form} />

Future Plans

Currently this only supports very basic form creation, but the goal of the project is ambitious:

  1. FormGroup class
    1. get(controlName: string) - returns the FormControl with matching name
    2. statusChanges - observable that emits the form status when it changes
    3. valueChanges - observable that emits the values of all controls when they change
  2. FormControl class
    1. setValue(value) - set the value of the control programmatically
    2. statusChanges - observable that emits the control status when it changes
    3. valueChanges - observable that emits the control value when it changes
    4. value - property that reflects the control value

... and so much more

All contributions are welcome. Let's make the fastest web form component powered by Astro