90 lines
2.7 KiB
Markdown
90 lines
2.7 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-form)
|
|
|
|
The Reactive Form component for [Astro](https://astro.build) 🔥
|
|
|
|
_[All contributions are welcome.](https://github.com/ayoayco/astro-reactive-form/issues)_
|
|
|
|
## Installation
|
|
|
|
```
|
|
npm i astro-reactive-form
|
|
```
|
|
|
|
## Usage
|
|
|
|
```astro
|
|
---
|
|
import Form, { FormControl, FormGroup } from 'astro-reactive-form';
|
|
|
|
// example of a form control
|
|
const radio: FormControl = {
|
|
name: 'is-good-looking',
|
|
type: 'radio',
|
|
label: 'Is Good Looking?',
|
|
value: 'checked',
|
|
labelPosition: 'right',
|
|
};
|
|
|
|
const form = new FormGroup([
|
|
// this is just an array of FormControl
|
|
{
|
|
name: 'first-name',
|
|
value: 'Ayo',
|
|
label: 'First Name',
|
|
},
|
|
{
|
|
name: 'last-name',
|
|
value: 'Ayco',
|
|
label: 'Last Name',
|
|
},
|
|
{
|
|
name: 'is-awesome',
|
|
type: 'checkbox',
|
|
label: 'Is Awesome?',
|
|
value: 'checked',
|
|
labelPosition: 'right',
|
|
},
|
|
radio, // the form control we declared earlier
|
|
]);
|
|
---
|
|
|
|
<Form formGroups={[form]} />
|
|
```
|
|
|
|
# Screenshots
|
|
|
|
Result of example above:
|
|
|
|
|
|
|
|
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. `get(controlName: string)` - returns the FormControl with matching name
|
|
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. `setValue(value)` - set the value of the control programmatically
|
|
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
|
|
|
|
... and so much more
|
|
|
|
_All contributions are welcome. Let's make the fastest web form component powered by Astro_
|