Astro Reactive Form
Generate a dynamic form based on your data, and modify programatically.
## Installation
In your [Astro](https://astro.build) project:
```
npm i @astro-reactive/form
```
## Usage
Use in an Astro page:
```astro
---
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");
---
```
# Screenshots
Result of example above:
Example of multiple form groups:
# Validation
See our [package for setting up validators](https://www.npmjs.com/package/@astro-reactive/validator).
# 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
1. FormGroup class
1. `statusChanges` - observable that emits the form status when it changes
1. `valueChanges` - observable that emits the values of all controls when they change
1. FormControl class
1. `statusChanges` - observable that emits the control status when it changes
1. `valueChanges` - observable that emits the control value when it changes
1. Documentation website
... and so much more
_All contributions are welcome. Let's make the fastest web form component powered by Astro_