astro-reactive-form/packages/form

Astro Reactive Form
Generate a dynamic form based on your data, and modify programatically.

Installation

In your Astro project:

npm i @astro-reactive/form

Usage

Use in an Astro page:

---
import { FormControl, FormGroup } from "@astro-reactive/form/core";
import Form from "@astro-reactive/form";

// create a form group
const form = new FormGroup([
  {
    name: "username",
    label: "Username",
  },
  {
    name: "password",
    label: "Password",
    type: "password",
  },
]);

// set the name optionally
form.name = "Simple Form";

// you can insert a control at any point
form.controls.push(
  new FormControl({
    type: "checkbox",
    name: "is-awesome",
    label: "is Awesome?",
    labelPosition: "right",
  })
);

// you can get a FormControl object
const userNameControl = form.get("username");

// you can set values dynamically
userNameControl?.setValue("RAMOOOON");
form.get('is-awesome')?.setValue("checked");
---

<!-- 
  the `formGroups` attribute can take a single FormGroup
  or an array of FormGroup for multiple fieldsets;
  we do a single for now in this example
-->
<Form
  formGroups={form}
  submitControl={{
    type: "submit",
    name: "submit",
  }}
/>

Screenshots

Result of example above:

Example of multiple form groups:

Validation

See our package for setting up validators.

Future Plans

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

1. Themes - unstyled, light mode, dark mode, compact, large
2. FormGroup class
   1. statusChanges - observable that emits the form status when it changes
   2. valueChanges - observable that emits the values of all controls when they change
3. FormControl class
   1. statusChanges - observable that emits the control status when it changes
   2. valueChanges - observable that emits the control value when it changes
4. Documentation website

... and so much more

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