0.2.1 • Published 3 years ago
astro-reactive-form v0.2.1
Astro Reactive Form 🔥
The Reactive Form component for Astro 🔥
All contributions are welcome.
Installation
npm i astro-reactive-form
Usage
---
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:
Example of multiple form groups:
Future Plans
Currently this only supports very basic form creation, but the goal of the project is ambitious:
- Validator library for common validation scenarios
- Client-side validation
- Server-side validation
- validation hooks - onFocus, onBlur, onSubmit
- Themes - unstyled, light mode, dark mode, compact, large
- FormGroup class
get(controlName: string)
- returns the FormControl with matching namestatusChanges
- observable that emits the form status when it changesvalueChanges
- observable that emits the values of all controls when they change
- FormControl class
setValue(value)
- set the value of the control programmaticallystatusChanges
- observable that emits the control status when it changesvalueChanges
- observable that emits the control value when it changesvalue
- 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