94 lines
2.8 KiB
Markdown
94 lines
2.8 KiB
Markdown
# Astro Reactive Form 🔥
|
|
|
|
[](https://www.npmjs.com/package/astro-reactive-form)
|
|
[](https://www.npmjs.com/package/astro-reactive-form)
|
|
[](https://www.npmjs.com/package/astro-reactive-form)
|
|
[](https://github.com/ayoayco/astro-reactive-library)
|
|
|
|
The Reactive Form component for [Astro](https://astro.build) 🔥
|
|
|
|
_[All contributions are welcome.](https://github.com/ayoayco/astro-reactive-library/issues)_
|
|
|
|
## Installation
|
|
|
|
```
|
|
npm i astro-reactive-form
|
|
```
|
|
|
|
## Usage
|
|
|
|
```astro
|
|
---
|
|
import { FormControl, FormGroup } from "astro-reactive-form/core";
|
|
import Form from "astro-reactive-form";
|
|
|
|
// create a form group (rendered as <fieldset>)
|
|
const form = new FormGroup([
|
|
{
|
|
name: "username",
|
|
label: "Username",
|
|
},
|
|
{
|
|
name: "password",
|
|
label: "Password",
|
|
type: "password",
|
|
},
|
|
]);
|
|
|
|
// set the name (rendered as <legend>)
|
|
form.name = "Simple Form";
|
|
|
|
// insert a control
|
|
form.controls.push(
|
|
new FormControl({
|
|
type: "checkbox",
|
|
name: "is-awesome",
|
|
label: "is Awesome?",
|
|
labelPosition: "right",
|
|
})
|
|
);
|
|
|
|
// get a FormControl object
|
|
const userNameControl = form.get("username");
|
|
|
|
// set values dynamically
|
|
userNameControl?.setValue("RAMOOOON");
|
|
form.get('is-awesome')?.setValue("checked");
|
|
---
|
|
|
|
<!-- the formGroups attribute takes an array of FormGroup-->
|
|
<Form formGroups={[form]} />
|
|
|
|
```
|
|
|
|
# Screenshots
|
|
|
|
Result of example above:
|
|
|
|
<img width="535" alt="Screen Shot 2022-10-01 at 7 29 00 PM" src="https://user-images.githubusercontent.com/4262489/193421174-5c604aca-7d16-4cd6-a7b1-f5b8752c838e.png">
|
|
|
|
Example of multiple form groups:
|
|
|
|
|
|
|
|
# Future Plans
|
|
|
|
Currently this only supports very basic form creation, but the goal of the project is ambitious:
|
|
|
|
1. Validator library for common validation scenarios
|
|
1. Client-side validation
|
|
1. Server-side validation
|
|
1. validation hooks - onFocus, onBlur, onSubmit
|
|
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. `value` - property that reflects the control value
|
|
1. Documentation website
|
|
|
|
... and so much more
|
|
|
|
_All contributions are welcome. Let's make the fastest web form component powered by Astro_
|